域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

一、背景介紹

智能手機(jī)的普及、移動(dòng)互聯(lián)網(wǎng)的發(fā)展、微信異軍突起，都為 H5 的發(fā)展提供了良好的環(huán)境。當(dāng)前，H5 已被廣泛應(yīng)用于營(yíng)銷、廣告、傳播之中。而針對(duì) H5 效率慢、體驗(yàn)差的硬傷，如何做好性能測(cè)試并優(yōu)化其性能就顯得尤為重要。

紅豆 Live 是微博子公司有信旗下的一款語(yǔ)音直播產(chǎn)品，有各種 H5 頁(yè)面。我們?cè)谧?H5 性能測(cè)試時(shí)進(jìn)行了總結(jié)，本文將為大家詳細(xì)介紹 H5 性能測(cè)試的關(guān)注點(diǎn)、測(cè)試工具及常見(jiàn)問(wèn)題。

二、H5 頁(yè)面的劣勢(shì)

HTML5 作為一門重要的開發(fā)語(yǔ)言，有著顯著的優(yōu)勢(shì)，其開發(fā)速度快、運(yùn)行效率高、安全性好、可擴(kuò)展性強(qiáng)、開源自由等，但與手機(jī)端原生 APP 相比，H5 頁(yè)面還具有以下劣勢(shì)：

不穩(wěn)定性比較強(qiáng)，頁(yè)面跳轉(zhuǎn)時(shí)更加復(fù)雜，運(yùn)行速度容易受網(wǎng)絡(luò)影響，很容易造成不流暢，甚至出現(xiàn)卡頓或卡死現(xiàn)象。

由于瀏覽器的導(dǎo)航本身占用一部分屏幕空間，H5 頁(yè)面空間比 APP 小，在本身就小的移動(dòng)設(shè)備屏幕中，容易造成信息記憶負(fù)擔(dān)。雖然可以利用滾屏擴(kuò)大頁(yè)面，但人腦的短期記憶是不穩(wěn)定的，用戶在滾動(dòng)屏幕的過(guò)程中需要臨時(shí)記憶的信息越多，他們的表現(xiàn)就會(huì)越差。

導(dǎo)航不明顯，原有底部導(dǎo)航消失，有效的導(dǎo)航遇到挑戰(zhàn)等。

交互動(dòng)態(tài)效果受到限制，影響一些頁(yè)面場(chǎng)景、邏輯的理解。

功能實(shí)現(xiàn)相比 APP 存在差距，用戶重復(fù)使用難度大，用戶粘性差。

三、H5 性能優(yōu)化技巧1. 代碼結(jié)構(gòu)和設(shè)計(jì) 壓縮組件

用戶使用 H5 功能過(guò)程中，絕大多數(shù)時(shí)間都花在網(wǎng)絡(luò)請(qǐng)求上，所以減少使用緊張的網(wǎng)絡(luò)資源在提高性能上能取得良好的收益。組件壓縮就是一種減少網(wǎng)絡(luò)傳輸消耗的辦法。

從 HTTP 請(qǐng)求返回資源中的 HTML，JS，CSS，XML 等都可以設(shè)置壓縮。對(duì)于已經(jīng)壓縮過(guò)的資源(如圖片音樂(lè)等)不需要再次壓縮，收益不高，而且增加 CPU 負(fù)擔(dān)。

JS，CSS 可以常通過(guò)去掉空格和回車來(lái)壓縮，再經(jīng)過(guò) GZIP 壓縮，能達(dá)到良好的壓縮效果。

壓縮方法：在 HTTP 請(qǐng)求中設(shè)置所接受到壓縮方式，在 Server 端對(duì) Response 資源進(jìn)行壓縮再傳給瀏覽器。一般使用 GZIP 設(shè)置 content-Encoding 字段。

設(shè)計(jì)技巧

CSS 放在頂部、Java 寫在底部或異步：DOM 樹構(gòu)建完成后，CSS 要放到 HTML 代碼的開頭的 head 標(biāo)簽結(jié)束前。如果網(wǎng)頁(yè)是動(dòng)態(tài)生成的，那么在 head 代碼完成后可以頁(yè)面輸出，這樣瀏覽器就會(huì)更快地解析出來(lái) head 中的內(nèi)容，開始下載 CSS 文件資源。而 CSS 放在底部則會(huì)引起重新繪制，用戶會(huì)感受到“閃屏”的不好體驗(yàn)。

CSS 使用技巧

正確使用 Display 屬性，因?yàn)?Display 屬性會(huì)影響頁(yè)面的渲染

避免圖片和 iFrame 等空 Src

盡量避免重設(shè)圖片大小

避免 CSS 表達(dá)式

移除空的 CSS 規(guī)則

不濫用 Web 字體、Float

不聲明過(guò)多的 Font-Size

值為 0 時(shí)不需要單位

標(biāo)準(zhǔn)化各種瀏覽器的前綴

避免讓選擇符看起來(lái)像正則表達(dá)式

JS 在下載的時(shí)候會(huì)引起兩個(gè)問(wèn)題：阻止網(wǎng)頁(yè)內(nèi)容的展示并組織其他資源下載。下載 JS 時(shí)候，并行下載機(jī)制失效。并且在 JS 中可能包括 Document.write 等改變頁(yè)面布局的操作，所以渲染引擎會(huì)等待 JS 下載完成再開始渲染。用戶側(cè)頁(yè)面加載時(shí)間會(huì)因?yàn)榈却兊酶L(zhǎng)。

關(guān)于緩存

添加緩存的最終目的是為了減少 HTTP 請(qǐng)求，最終達(dá)到提升性能的效果，所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長(zhǎng) Cache 緩存一切可緩存的資源。

2. 網(wǎng)絡(luò)請(qǐng)求 HTTP 請(qǐng)求個(gè)數(shù)

有統(tǒng)計(jì)證明：一個(gè)網(wǎng)頁(yè)最終到達(dá)終端用戶有 80% 的時(shí)間都是在 JS，CSS，圖片，MP3，F(xiàn)lash 等資源的 HTTP 請(qǐng)求。另一方面，HTTP 請(qǐng)求的數(shù)量也是有限制的，瀏覽器對(duì)同一個(gè)域名有連接數(shù)限制，不同瀏覽器內(nèi)核、不同版本的請(qǐng)求數(shù)不盡相同，大部分的并發(fā)請(qǐng)求數(shù)是 6 個(gè)。通過(guò)夠控制 HTTP 請(qǐng)求的數(shù)量，減少 HTTP 請(qǐng)求時(shí)間，達(dá)到減少網(wǎng)頁(yè)加載和呈現(xiàn)的時(shí)間，能帶來(lái)更好的用戶體驗(yàn)。

圖片格式和大小是否合適

圖片格式：H5 中常用的圖片格式有 WebP、JPG 和 PNG8。其中 WebP 的圖片最小，但在 IOS 或者 Android4.0 以下的系統(tǒng)中可能會(huì)有兼容性問(wèn)題需要解決。JPG 是最常使用的方案，大小適中，解碼速度快，兼容性問(wèn)題也基本不存在，在 H5 的應(yīng)用中使用起來(lái)性價(jià)比最高的方案。如果有 PNG24|32 圖片，盡量將其轉(zhuǎn)換層 PNG8，能極大減少圖片大小。BMP 是未壓縮的圖片格式，應(yīng)該避免使用。

圖片尺寸：當(dāng)前移動(dòng)設(shè)備中常用個(gè)尺寸規(guī)格為 480×800、600×1024、720×1280，800×1280 等，保證提供的原圖能夠被呈現(xiàn)，避免在代碼中調(diào)整圖片大小。

避免非 200 返回值

每一個(gè) HTTP 請(qǐng)求都有一個(gè)相對(duì)于的返回狀態(tài)標(biāo)志當(dāng)次請(qǐng)求是否如期完成，如：

1：請(qǐng)求收到，這些狀態(tài)代碼表示臨時(shí)的響應(yīng)。

2：操作成功，這類狀態(tài)代碼表明服務(wù)器成功地接受了客戶端請(qǐng)求。

3：重定向，客戶端瀏覽器必須采取更多操作來(lái)實(shí)現(xiàn)請(qǐng)求。

4：客戶端錯(cuò)誤，發(fā)生錯(cuò)誤，客戶端似乎有問(wèn)題。

5：服務(wù)器錯(cuò)誤，服務(wù)器由于遇到錯(cuò)誤而不能完成該請(qǐng)求。

所以，如果有 HTTP 請(qǐng)求返回為非 200 的狀態(tài)碼，我們認(rèn)為這一次請(qǐng)求時(shí)無(wú)意義的，占用了稀缺的網(wǎng)絡(luò)資源，所應(yīng)該避免非 200 的返回狀態(tài)碼。

四、性能測(cè)試工具

推薦采用 Chrome 開發(fā)者工具進(jìn)行性能測(cè)試，該工具有以下優(yōu)點(diǎn)：

支持移動(dòng)端 H5 在 PC 端遠(yuǎn)程調(diào)試，能夠?qū)唧w的移動(dòng)端設(shè)備進(jìn)行測(cè)試;

集成了 Page Speed;

提供 Network 面板，展示瀑布流視圖，各類資源清晰羅列，還提供圖的縮略圖，方便查看圖片大小尺寸和冗余或缺失;

提供 TimeLine 面板，展示 CPU、內(nèi)存、FPS 等性能數(shù)據(jù)。

下面看下參考 Google 官方網(wǎng)站，重點(diǎn)介紹 Chrome 開發(fā)者工具中的 Network 和 Timeline 面板。

1.Network 面板

Network 面板可以記錄頁(yè)面上的網(wǎng)絡(luò)請(qǐng)求的詳情信息，從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求 Request 后分析 HTTP 請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息(包括狀態(tài)、資源類型、大小、所用時(shí)間、Request 和 Response 等)，可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。該面板主要包括 5 大塊窗格 (Pane)：

Controls 控制 Network 的外觀和功能。

Filters 控制 Requests Table 具體顯示哪些內(nèi)容。

Overview 顯示獲取到資源的時(shí)間軸信息。

Requests Table 按資源獲取的前后順序顯示所有獲取到的資源信息，點(diǎn)擊資源名可以查看該資源的詳細(xì)信息。

Summary 顯示總的請(qǐng)求數(shù)、數(shù)據(jù)傳輸量、加載時(shí)間信息。

其中 Requests Table 顯示如下信息列：

• Name 資源名稱，點(diǎn)擊名稱可以查看資源的詳情情況，包括 Headers、Preview、Response、Cookies、Timing。

• Status HTTP 狀態(tài)碼。

• Type 請(qǐng)求的資源 MIME 類型。

• Initiator 標(biāo)記請(qǐng)求是由哪個(gè)對(duì)象或進(jìn)程發(fā)起的(請(qǐng)求源)。• Parser： 請(qǐng)求由 Chrome 的 HTML 解析器時(shí)發(fā)起的。

• Redirect：請(qǐng)求是由 HTTP 頁(yè)面重定向發(fā)起的。

• ：請(qǐng)求是由 腳本發(fā)起的。

• Other：請(qǐng)求是由其他進(jìn)程發(fā)起的，比如用戶點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面或者在地址欄輸入 URL 地址。

• Size 從服務(wù)器下載的文件和請(qǐng)求的資源大小。如果是從緩存中取得的資源則該列會(huì)顯示 (from cache)

• Time 請(qǐng)求或下載的時(shí)間，從發(fā)起 Request 到獲取到 Response 所用的總時(shí)間。

• Timeline 顯示所有網(wǎng)絡(luò)請(qǐng)求的可視化瀑布流 (時(shí)間狀態(tài)軸)，點(diǎn)擊時(shí)間軸，可以查看該請(qǐng)求的詳細(xì)信息，點(diǎn)擊列頭則可以根據(jù)指定的字段可以排序。

2.Timeline 面板

在 Chrome 中點(diǎn)擊開發(fā)者工具，打開 Timeline 面板，這個(gè)工具真的很強(qiáng)大，Timeline 工具欄提供了對(duì)于在裝載你的 Web 應(yīng)用的過(guò)程中，時(shí)間花費(fèi)情況的概覽，這些應(yīng)用包括處理 DOM 事件, 頁(yè)面布局渲染或者向屏幕繪制元素。Timeline 可以通過(guò)事件，框架，和實(shí)時(shí)內(nèi)存用量 3 個(gè)方面的數(shù)據(jù)來(lái)監(jiān)測(cè)網(wǎng)頁(yè)，通過(guò)這些數(shù)據(jù)，我們可以方便的找出頁(yè)面中存在問(wèn)題的地方。該面板主要包括 4 大塊窗格 (Pane)：

Controls 錄制開關(guān)和控制錄制過(guò)程中需要記錄哪些信息。

Overview 網(wǎng)頁(yè)性能的概要信息。

Flame Chart CPU 堆棧軌跡的可視化圖表 (火焰圖)。在圖表里面有 1 到 3 條虛豎線。

Details 當(dāng)選擇一個(gè)指定的事件后，會(huì)顯示這個(gè)事件的更多信息;當(dāng)沒(méi)有選擇事件時(shí)，會(huì)顯示指定的時(shí)間幀信息。Flame Chart 里面的虛豎線含義：藍(lán)色標(biāo)記 DOMContentLoaded 事件;綠色標(biāo)記第一次的繪制時(shí)間點(diǎn);紅色代表 load 事件。

其中第 2 塊 Overview 顯示了網(wǎng)頁(yè)性能相關(guān)的概要信息，可以通過(guò)鼠標(biāo)或者區(qū)域邊界上的灰色滑塊來(lái)拖出一個(gè)指定區(qū)域范圍，F(xiàn)lame Chart 會(huì)跟著局部放大顯示指定區(qū)域內(nèi)的詳情信息。

可以通過(guò)鍵盤上的 W,S 來(lái)放大和縮小指定區(qū)域，通過(guò) A,D 來(lái)向左或向右移動(dòng)指定區(qū)域。這個(gè)窗格包含了三個(gè)圖表：

FPS 每秒幀數(shù) (Frames Per Second)。綠色柱狀條越高，則每秒幀數(shù)越高。在 FPS 圖表上方的紅色塊是標(biāo)記一個(gè)長(zhǎng)幀。

CPU 標(biāo)記 CPU 資源的使用情況，這里的面積圖標(biāo)記著消耗 CPU 資源的各類事件。

NET 各種顏色的柱狀條分別顯示一種資源。柱狀條越長(zhǎng)，代表獲取這個(gè)資源的時(shí)間越長(zhǎng)。

CPU 面積圖中各顏色的含義：藍(lán)色代表 HTML 文件;黃色代表腳本文件;紫色代表樣式文件;綠色代表媒體文件;灰色代表其它雜項(xiàng)文件。NET 圖表柱狀條兩種顏色的含義：較亮的部分表示等待時(shí)間(當(dāng)資源被請(qǐng)求時(shí)，直到第一個(gè)字節(jié)被下載的時(shí)間);較暗的部分表示傳輸時(shí)間 (在第一個(gè)和最后一個(gè)字節(jié)被下載之間的時(shí)間)。

五、常見(jiàn)問(wèn)題及優(yōu)化方案

在請(qǐng)求的資源中有未使用的圖片，造成不必要的資源消耗，應(yīng)過(guò)濾掉，如下圖所示。

接口請(qǐng)求次數(shù)太多。

優(yōu)化方案：合并頁(yè)面的多個(gè)圖片資源，減少請(qǐng)求次數(shù)。通過(guò) CSS Sprite 將直播間頁(yè)面的多個(gè)資源合并(如截圖中標(biāo)注的圖片)，再通過(guò) background-image 和 backgorund-position 定位出圖中的小區(qū)域，那么只需要一個(gè) HTTP 請(qǐng)求就可以獲得全部圖片。

事件處理時(shí)間長(zhǎng)，每項(xiàng)事件最好控制在 500ms 以內(nèi)。

優(yōu)化方案：

• 減少重繪和回流

• 緩存 Dom 選擇與計(jì)算

• 緩存列表.length

• 盡量使用事件代理，避免批量綁定事件

• 盡量使用 ID 選擇器

• 使用 touchstart、touchend 代替 click，因快影響速度快。

幀率低。應(yīng)用的幀率最好一直保持在 30-60fps，如果太低了，應(yīng)用就會(huì)因?yàn)閬G幀看上去混亂或者抖動(dòng)。

優(yōu)化方案：要想檢查一段時(shí)間內(nèi)的繪制(paint)是另一個(gè)挑戰(zhàn)。如果想知道為什么某個(gè)特定的元素繪制的比較慢，可以把 DOM 樹中的部分元素設(shè)置成 display:none，將它們從布局 / 內(nèi)容樹中移除，并且設(shè)置 visibility:hidden 不讓它們繪制。然后你可以用 Timeline 進(jìn)行錄制以便測(cè)量，看一下繪制時(shí)間，在強(qiáng)制重繪模式中可以觀察(實(shí)驗(yàn)性的)繪制率。(感謝 Paul 提供的竅門)

點(diǎn)擊界面按鈕后，二級(jí)頁(yè)面彈出慢。

優(yōu)化方案：可以調(diào)整請(qǐng)求的順序，由拿到數(shù)據(jù)再?gòu)棇?，變成彈層的同時(shí)取數(shù)據(jù)，加快彈層展示時(shí)間.

六、總結(jié)

目前 H5 的應(yīng)用非常廣泛，如何把控好 H5 的性能是一門重要的課程。從代碼設(shè)計(jì)可以優(yōu)化 CSS、JS、圖片、緩存等。還可以通過(guò) Chrome 開發(fā)者工具，監(jiān)控 H5 的網(wǎng)絡(luò)請(qǐng)求和加載時(shí)間，找到性能消耗較大的根源，優(yōu)化網(wǎng)絡(luò)請(qǐng)求數(shù)、網(wǎng)絡(luò)加載時(shí)間以及渲染優(yōu)化。

本文作者 | 蔡媚霞 (紅豆 Live 軟件測(cè)試工程師)

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！