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