一、背景介紹
智能手機(jī)的普及、移動互聯(lián)網(wǎng)的發(fā)展、微信異軍突起，都為 H5 的發(fā)展提供了良好的環(huán)境。當(dāng)前，H5 已被廣泛應(yīng)用于營銷、廣告、傳播之中。而針對 H5 效率慢、體驗差的硬傷，如何做好性能測試并優(yōu)化其性能就顯得尤為重要。
紅豆 Live 是微博子公司有信旗下的一款語音直播產(chǎn)品，有各種 H5 頁面。我們在做 H5 性能測試時進(jìn)行了總結(jié)，本文將為大家詳細(xì)介紹 H5 性能測試的關(guān)注點、測試工具及常見問題。
二、H5 頁面的劣勢
HTML5 作為一門重要的開發(fā)語言，有著顯著的優(yōu)勢，其開發(fā)速度快、運行效率高、安全性好、可擴(kuò)展性強(qiáng)、開源自由等，但與手機(jī)端原生 APP 相比，H5 頁面還具有以下劣勢：
不穩(wěn)定性比較強(qiáng)，頁面跳轉(zhuǎn)時更加復(fù)雜，運行速度容易受網(wǎng)絡(luò)影響，很容易造成不流暢，甚至出現(xiàn)卡頓或卡死現(xiàn)象。
由于瀏覽器的導(dǎo)航本身占用一部分屏幕空間，H5 頁面空間比 APP 小，在本身就小的移動設(shè)備屏幕中，容易造成信息記憶負(fù)擔(dān)。雖然可以利用滾屏擴(kuò)大頁面，但人腦的短期記憶是不穩(wěn)定的，用戶在滾動屏幕的過程中需要臨時記憶的信息越多，他們的表現(xiàn)就會越差。
導(dǎo)航不明顯，原有底部導(dǎo)航消失，有效的導(dǎo)航遇到挑戰(zhàn)等。
交互動態(tài)效果受到限制，影響一些頁面場景、邏輯的理解。
功能實現(xiàn)相比 APP 存在差距，用戶重復(fù)使用難度大，用戶粘性差。
三、H5 性能優(yōu)化技巧1. 代碼結(jié)構(gòu)和設(shè)計 壓縮組件
用戶使用 H5 功能過程中，絕大多數(shù)時間都花在網(wǎng)絡(luò)請求上，所以減少使用緊張的網(wǎng)絡(luò)資源在提高性能上能取得良好的收益。組件壓縮就是一種減少網(wǎng)絡(luò)傳輸消耗的辦法。
從 HTTP 請求返回資源中的 HTML，JS，CSS，XML 等都可以設(shè)置壓縮。對于已經(jīng)壓縮過的資源(如圖片音樂等)不需要再次壓縮，收益不高，而且增加 CPU 負(fù)擔(dān)。
JS，CSS 可以常通過去掉空格和回車來壓縮，再經(jīng)過 GZIP 壓縮，能達(dá)到良好的壓縮效果。
壓縮方法：在 HTTP 請求中設(shè)置所接受到壓縮方式，在 Server 端對 Response 資源進(jìn)行壓縮再傳給瀏覽器。一般使用 GZIP 設(shè)置 content-Encoding 字段。
設(shè)計技巧
CSS 放在頂部、Java 寫在底部或異步：DOM 樹構(gòu)建完成后，CSS 要放到 HTML 代碼的開頭的 head 標(biāo)簽結(jié)束前。如果網(wǎng)頁是動態(tài)生成的，那么在 head 代碼完成后可以頁面輸出，這樣瀏覽器就會更快地解析出來 head 中的內(nèi)容，開始下載 CSS 文件資源。而 CSS 放在底部則會引起重新繪制，用戶會感受到“閃屏”的不好體驗。
CSS 使用技巧
正確使用 Display 屬性，因為 Display 屬性會影響頁面的渲染
避免圖片和 iFrame 等空 Src
盡量避免重設(shè)圖片大小
避免 CSS 表達(dá)式
移除空的 CSS 規(guī)則
不濫用 Web 字體、Float
不聲明過多的 Font-Size
值為 0 時不需要單位
標(biāo)準(zhǔn)化各種瀏覽器的前綴
避免讓選擇符看起來像正則表達(dá)式
JS 在下載的時候會引起兩個問題：阻止網(wǎng)頁內(nèi)容的展示并組織其他資源下載。下載 JS 時候，并行下載機(jī)制失效。并且在 JS 中可能包括 Document.write 等改變頁面布局的操作，所以渲染引擎會等待 JS 下載完成再開始渲染。用戶側(cè)頁面加載時間會因為等待而變得更長。
關(guān)于緩存
添加緩存的最終目的是為了減少 HTTP 請求，最終達(dá)到提升性能的效果，所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長 Cache 緩存一切可緩存的資源。
2. 網(wǎng)絡(luò)請求 HTTP 請求個數(shù)
有統(tǒng)計證明：一個網(wǎng)頁最終到達(dá)終端用戶有 80% 的時間都是在 JS，CSS，圖片，MP3，F(xiàn)lash 等資源的 HTTP 請求。另一方面，HTTP 請求的數(shù)量也是有限制的，瀏覽器對同一個域名有連接數(shù)限制，不同瀏覽器內(nèi)核、不同版本的請求數(shù)不盡相同，大部分的并發(fā)請求數(shù)是 6 個。通過夠控制 HTTP 請求的數(shù)量，減少 HTTP 請求時間，達(dá)到減少網(wǎng)頁加載和呈現(xiàn)的時間，能帶來更好的用戶體驗。
圖片格式和大小是否合適
圖片格式：H5 中常用的圖片格式有 WebP、JPG 和 PNG8。其中 WebP 的圖片最小，但在 IOS 或者 Android4.0 以下的系統(tǒng)中可能會有兼容性問題需要解決。JPG 是最常使用的方案，大小適中，解碼速度快，兼容性問題也基本不存在，在 H5 的應(yīng)用中使用起來性價比最高的方案。如果有 PNG24|32 圖片，盡量將其轉(zhuǎn)換層 PNG8，能極大減少圖片大小。BMP 是未壓縮的圖片格式，應(yīng)該避免使用。
圖片尺寸：當(dāng)前移動設(shè)備中常用個尺寸規(guī)格為 480×800、600×1024、720×1280，800×1280 等，保證提供的原圖能夠被呈現(xiàn)，避免在代碼中調(diào)整圖片大小。
避免非 200 返回值
每一個 HTTP 請求都有一個相對于的返回狀態(tài)標(biāo)志當(dāng)次請求是否如期完成，如：
1：請求收到，這些狀態(tài)代碼表示臨時的響應(yīng)。
2：操作成功，這類狀態(tài)代碼表明服務(wù)器成功地接受了客戶端請求。
3：重定向，客戶端瀏覽器必須采取更多操作來實現(xiàn)請求。
4：客戶端錯誤，發(fā)生錯誤，客戶端似乎有問題。
5：服務(wù)器錯誤，服務(wù)器由于遇到錯誤而不能完成該請求。
所以，如果有 HTTP 請求返回為非 200 的狀態(tài)碼，我們認(rèn)為這一次請求時無意義的，占用了稀缺的網(wǎng)絡(luò)資源，所應(yīng)該避免非 200 的返回狀態(tài)碼。
四、性能測試工具
推薦采用 Chrome 開發(fā)者工具進(jìn)行性能測試，該工具有以下優(yōu)點：
支持移動端 H5 在 PC 端遠(yuǎn)程調(diào)試，能夠?qū)唧w的移動端設(shè)備進(jìn)行測試;
集成了 Page Speed;
提供 Network 面板，展示瀑布流視圖，各類資源清晰羅列，還提供圖的縮略圖，方便查看圖片大小尺寸和冗余或缺失;
提供 TimeLine 面板，展示 CPU、內(nèi)存、FPS 等性能數(shù)據(jù)。
下面看下參考 Google 官方網(wǎng)站，重點介紹 Chrome 開發(fā)者工具中的 Network 和 Timeline 面板。
1.Network 面板
Network 面板可以記錄頁面上的網(wǎng)絡(luò)請求的詳情信息，從發(fā)起網(wǎng)頁頁面請求 Request 后分析 HTTP 請求后得到的各個請求資源信息(包括狀態(tài)、資源類型、大小、所用時間、Request 和 Response 等)，可以根據(jù)這個進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。該面板主要包括 5 大塊窗格 (Pane)：
Controls 控制 Network 的外觀和功能。
Filters 控制 Requests Table 具體顯示哪些內(nèi)容。
Overview 顯示獲取到資源的時間軸信息。
Requests Table 按資源獲取的前后順序顯示所有獲取到的資源信息，點擊資源名可以查看該資源的詳細(xì)信息。
Summary 顯示總的請求數(shù)、數(shù)據(jù)傳輸量、加載時間信息。
其中 Requests Table 顯示如下信息列：
• Name 資源名稱，點擊名稱可以查看資源的詳情情況，包括 Headers、Preview、Response、Cookies、Timing。
• Status HTTP 狀態(tài)碼。
• Type 請求的資源 MIME 類型。
• Initiator 標(biāo)記請求是由哪個對象或進(jìn)程發(fā)起的(請求源)。• Parser： 請求由 Chrome 的 HTML 解析器時發(fā)起的。
• Redirect：請求是由 HTTP 頁面重定向發(fā)起的。
• ：請求是由 腳本發(fā)起的。
• Other：請求是由其他進(jìn)程發(fā)起的，比如用戶點擊一個鏈接跳轉(zhuǎn)到另一個頁面或者在地址欄輸入 URL 地址。
• Size 從服務(wù)器下載的文件和請求的資源大小。如果是從緩存中取得的資源則該列會顯示 (from cache)
• Time 請求或下載的時間，從發(fā)起 Request 到獲取到 Response 所用的總時間。
• Timeline 顯示所有網(wǎng)絡(luò)請求的可視化瀑布流 (時間狀態(tài)軸)，點擊時間軸，可以查看該請求的詳細(xì)信息，點擊列頭則可以根據(jù)指定的字段可以排序。
2.Timeline 面板
在 Chrome 中點擊開發(fā)者工具，打開 Timeline 面板，這個工具真的很強(qiáng)大，Timeline 工具欄提供了對于在裝載你的 Web 應(yīng)用的過程中，時間花費情況的概覽，這些應(yīng)用包括處理 DOM 事件, 頁面布局渲染或者向屏幕繪制元素。Timeline 可以通過事件，框架，和實時內(nèi)存用量 3 個方面的數(shù)據(jù)來監(jiān)測網(wǎng)頁，通過這些數(shù)據(jù)，我們可以方便的找出頁面中存在問題的地方。該面板主要包括 4 大塊窗格 (Pane)：
Controls 錄制開關(guān)和控制錄制過程中需要記錄哪些信息。
Overview 網(wǎng)頁性能的概要信息。
Flame Chart CPU 堆棧軌跡的可視化圖表 (火焰圖)。在圖表里面有 1 到 3 條虛豎線。
Details 當(dāng)選擇一個指定的事件后，會顯示這個事件的更多信息;當(dāng)沒有選擇事件時，會顯示指定的時間幀信息。Flame Chart 里面的虛豎線含義：藍(lán)色標(biāo)記 DOMContentLoaded 事件;綠色標(biāo)記第一次的繪制時間點;紅色代表 load 事件。
其中第 2 塊 Overview 顯示了網(wǎng)頁性能相關(guān)的概要信息，可以通過鼠標(biāo)或者區(qū)域邊界上的灰色滑塊來拖出一個指定區(qū)域范圍，F(xiàn)lame Chart 會跟著局部放大顯示指定區(qū)域內(nèi)的詳情信息。
可以通過鍵盤上的 W,S 來放大和縮小指定區(qū)域，通過 A,D 來向左或向右移動指定區(qū)域。這個窗格包含了三個圖表：
FPS 每秒幀數(shù) (Frames Per Second)。綠色柱狀條越高，則每秒幀數(shù)越高。在 FPS 圖表上方的紅色塊是標(biāo)記一個長幀。
CPU 標(biāo)記 CPU 資源的使用情況，這里的面積圖標(biāo)記著消耗 CPU 資源的各類事件。
NET 各種顏色的柱狀條分別顯示一種資源。柱狀條越長，代表獲取這個資源的時間越長。
CPU 面積圖中各顏色的含義：藍(lán)色代表 HTML 文件;黃色代表腳本文件;紫色代表樣式文件;綠色代表媒體文件;灰色代表其它雜項文件。NET 圖表柱狀條兩種顏色的含義：較亮的部分表示等待時間(當(dāng)資源被請求時，直到第一個字節(jié)被下載的時間);較暗的部分表示傳輸時間 (在第一個和最后一個字節(jié)被下載之間的時間)。
五、常見問題及優(yōu)化方案
在請求的資源中有未使用的圖片，造成不必要的資源消耗，應(yīng)過濾掉，如下圖所示。
接口請求次數(shù)太多。
優(yōu)化方案：合并頁面的多個圖片資源，減少請求次數(shù)。通過 CSS Sprite 將直播間頁面的多個資源合并(如截圖中標(biāo)注的圖片)，再通過 background-image 和 backgorund-position 定位出圖中的小區(qū)域，那么只需要一個 HTTP 請求就可以獲得全部圖片。
事件處理時間長，每項事件最好控制在 500ms 以內(nèi)。
優(yōu)化方案：
• 減少重繪和回流
• 緩存 Dom 選擇與計算
• 緩存列表.length
• 盡量使用事件代理，避免批量綁定事件
• 盡量使用 ID 選擇器
• 使用 touchstart、touchend 代替 click，因快影響速度快。
幀率低。應(yīng)用的幀率最好一直保持在 30-60fps，如果太低了，應(yīng)用就會因為丟幀看上去混亂或者抖動。
優(yōu)化方案：要想檢查一段時間內(nèi)的繪制(paint)是另一個挑戰(zhàn)。如果想知道為什么某個特定的元素繪制的比較慢，可以把 DOM 樹中的部分元素設(shè)置成 display:none，將它們從布局 / 內(nèi)容樹中移除，并且設(shè)置 visibility:hidden 不讓它們繪制。然后你可以用 Timeline 進(jìn)行錄制以便測量，看一下繪制時間，在強(qiáng)制重繪模式中可以觀察(實驗性的)繪制率。(感謝 Paul 提供的竅門)
點擊界面按鈕后，二級頁面彈出慢。
優(yōu)化方案：可以調(diào)整請求的順序，由拿到數(shù)據(jù)再彈層，變成彈層的同時取數(shù)據(jù)，加快彈層展示時間.
六、總結(jié)
目前 H5 的應(yīng)用非常廣泛，如何把控好 H5 的性能是一門重要的課程。從代碼設(shè)計可以優(yōu)化 CSS、JS、圖片、緩存等。還可以通過 Chrome 開發(fā)者工具，監(jiān)控 H5 的網(wǎng)絡(luò)請求和加載時間，找到性能消耗較大的根源，優(yōu)化網(wǎng)絡(luò)請求數(shù)、網(wǎng)絡(luò)加載時間以及渲染優(yōu)化。
本文作者 | 蔡媚霞 (紅豆 Live 軟件測試工程師)
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
