前端性能調優方法同樣適用於H5。
1、H5前端性能知識點
學習前端性能，必須對HTTP協議有所了解。
1.1 瀏覽器渲染引擎
瀏覽器是Html解析和頁面最終展示的工具。
瀏覽器的主要功能：將用戶選擇的web資源呈現出來，需要從服務器請求資源，並將其顯示在瀏覽器窗口中，資源的格式通常是HTML，也包括PDF、image及其它格式。在瀏覽器組成部分中，渲染引擎是用戶直接相關，呈現用戶所需頁面的部分。
瀏覽器內核[渲染引擎]：作用是將頁面轉變成可視化的圖像結果。渲染引擎工作流：
第一步，解析HTML構建DOM樹：從html標簽的解析開始，將各種標簽解析為dom樹中的各個節點，標簽和dom樹種的節點是一一對應關系。
第二步，構建渲染樹：將CSS和style標簽中的樣式信息解析為渲染樹，渲染樹由一些包含有顏色和大小等屬性的矩形組成，將按照正確的順序顯示到屏幕上。
第三步，渲染樹布局：確定每個節點在屏幕上的確切顯示位置。
第四步，渲染樹繪制：遍歷渲染樹並用UI后端層將每一個節點繪制出來。
H5頁面執行過程：[頁面加載耗時:firstPaint、DomContentLoaded(首屏頁面可見)、OnLoad（首屏加載完成）]
- 1.解析HTML結構
- 2.加載外部腳本和樣式表文件。
- 3.解析並執行腳本代碼。//部分腳本會阻塞頁面的加載。
- 4.DOM樹構建完成。//DOMContentLoaded事件。
- 5.加載圖片等外部文件。
- 6.頁面加載完畢。//load事件
1.2 測試關注指標
- HTTP相關
http請求個數。解決方案：CSS精靈、圖片地圖、js css合並。
2.組件是否壓縮。解決方案：壓縮方法、壓縮對象、圖片格式和大小是否合適、CSS放在頂部、JS放在底部、js & CSS壓縮、是否添加緩存、避免非200返回值、使用CDN。
- 時間相關[耗時]
1.白屏時間：用戶首次看到網頁有內容的時間，即第一次渲染流程完成時間。
2.首屏時間：用戶看到第一屏，即整個網頁頂部大小為當前窗口的區域，顯示完整的時間。盡量讓它滿足一秒鍾法則。
3.首資源下載時間：從開始下載到第一個資源均下載完成的時間，不包括頁面繪制時間。
4.總資源下載時間：從開始下載到所有資源均下載完成的時間，不包括頁面繪制時間。
5.用戶可操作時間：從頁面開始加載到用戶操作可響應的時間。
- WebView相關[內存/流量、CPU]
在android和IOS上測試H5性能，測試員還應該關注因加載H5而引起的app常規性能指標。
1.內存：加載頁面前后內存變化，可間接反映H5中資源數量和大小，如dom數量，圖片大小。
2.CPU：當頁面中資源樣式復雜，強調視覺效果時，測試員可觀察CPU占用率來反映H5繪制質量。如果CPU長期處於高占用率，可考慮降低高計算量的視覺效果等手段。
3.FPS(流暢度)：幀率尤其在有視頻和動畫效果的H5中，測試員應該重點關注，防止嚴重的卡頓流出。
2、前端性能優化方法
2.1 減少HTTP請求數：
1)合並圖片：圖片多的時候，針對相對穩定的圖片，可以通過減少圖片數量，合並為一張大圖，從而減少HTTP請求數。其次，可以通過增加緩存來提示技能。合並大圖可以使用CSS Sprites技術來做處理。
2)合並壓縮CSS樣式表和JS腳本:工具可以通過Minify、YUI Compressor等。
3)去掉不必要的請求：殘留的無效連接，這些無效連接對頁面並沒有實際作用。可以通過firebug工具去查看。
4)充分利用緩存：主要關注客戶端的緩存信息。
如果當前時間小於(<)expires，瀏覽器會從緩存中直接獲取相關的數據信息或HTML文件；如果當前時間>expires，瀏覽器會向服務器發送請求來獲取相關數據信息。
2.2 圖片優化
1) 盡可能地使用PNG格式的圖片，相對來說大小較小。
2)對於不同的圖片格式，上線前做一次優化。比如PNG可以通過工具Pngcrush來優化，JPG格式的圖片可以使用Jpgtran來優化，GIF格式的圖片可以使用Gifsicle來優化。
3)圖片的延遲加載，也稱賴加載。
2.3 使用CDN：Content Delivery Network，內容分發網絡。基本思路：盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸得更快、更穩定。通過在網絡各處防止節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡，CDN系統能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息，將用戶的請求重新導向離用戶最近的服務節點。
2.4 開啟GZIP：可理解為壓縮，比較普遍的數據壓縮格式，用於壓縮使用Internet傳輸的所有文本類資源，如HTML、CSS、JS等。
2.5 樣式表和JS文件的優化：位置存放。CSS樣式表文件放到頁面的頭部；JS文件放到頁面的尾部。
2.6 使用無cookie域名：當發送一個請求的時候，同時還要請求一張靜態的圖片和發送cookie時，服務器對於這些cookie不會做任何使用，也就是說這些cookie沒有什么用，沒必要隨請求一同發送。
2.7 前端代碼結構優化：計算的邏輯放到后端進行，前端只負責展示，同時對后端提供數據的接口進行拆分，不要都擠到一個接口里。
2.8 其他優化方法：
1)避免CSS@imort。可以用http://www.feedthebot.com/tools/css-delivery/來檢測當前頁面是否有CSS@import.
2)優化DNS查找。設置Apache的httpd.conf配置文件中的HostnameLookups為off，從而減少DNS查詢次數。
3)移除重復腳本。
4)合理使用Etag。
5)Favicon.icon一定不能忘。
6)避免非200的返回。
3、前端性能測試
在實施測試活動時，需考慮被測對象的前端性能與並發性能。
web前端性能通過關注頁面容量、資源數量、傳輸壓縮、本地緩存和請求數量等幾個方面。
1）頁面容量：用戶每次請求的響應數據都需要經過下載，本地瀏覽器渲染后展示。很多公司都有相應的頁面設計規范，如“非首頁靜態頁面含圖片字節不超過60KB、全尺寸banner不超過14KB、豎邊廣告130×300 25KB”等。因此在實際測試過程中需關注頁面元素的大小，以確保這些元素確實根據頁面設計標准進行。操作方法：打開IE瀏覽器，進入對應的網頁，點擊右鍵->屬性。
2）資源數量：在服務器傳輸過程中，如果資源文件太多，同樣會降低網絡的傳輸速度，因此堅決杜絕無效資源文件在服務器與客戶端之間傳輸。測試工程師需確認每一個資源是否確實需要，並杜絕在過程中出現404錯誤的訪問問題。可以通過工具xenu或httpwatch檢查鏈接是否有404.
3）本地緩存：通常會將動態的業務響應轉化成靜態文件傳輸至客戶端並寫入緩存，當用戶再次訪問時，可根據實際情況從本地Cache文件讀取，以此加快訪問感受，減輕服務器壓力。測試工程師可通過測試工具檢測本地緩存設置對訪問速度的影響。可以通過工具hattpwatch進行瀏覽查看。
4）請求數量：請求數量減少的優勢：減少DNS請求所耗費的時間、減少服務器壓力、減少HTTP請求頭。因此測試工程師在實際測試時可關注程序員是否按照規范切實減少了相關請求的數量，從而優化系統前端性能。
4、前端性能工具網址
一般常用的工具有：firebug、Chrome開發者工具、HttpWatch、Yslow、PageSpeed.隨着前端性能的發展，也有很多前端性能測試的服務，如Gtmetrix等。平台工具：Page Speed、PCAP Web Performance Analyzer、WebPagetest。
https://developers.google.com/speed/pagespeed/insights/
webpagetest測試結果分析：https://blog.csdn.net/qq_24373725/article/details/80091044
5、前端性能測試對比結果模板
1）對比測試數據記錄
此表為最基礎的，可以根據實際情況自行擴展
| 對比網站 |
URL |
Total time(s) |
Total bytes sent |
Total bytes received |
Total requests |
現象 |
|
|
|
|
|
|
|
|
2）對比測試結果分析
根據測試數據的對比結果進行分析
3）優化建議
根據分析結果給出一定的優化建議