性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）
目錄
1. 前端基礎知識
1.1 為什么要關注前端頁面的性能，了解頁面的加載，渲染方式和順序？
1.2 一次頁面請求會經歷哪些步驟？
1.3 頁面的展示過程
2. 前端性能測試的常用工具
2.1 Google Page Speed
2.2 Which loads faster
2.3 WebPageTest
2.4 瀏覽器的開發者工具
2.5 Fiddler
3. 前端性能優化的常見方法
3.1 DNS優化
3.2 減少HTTP請求
3.3 減小請求元素的大小
3.4 使用CDN加速
3.5 其他優化方法
4. HTTP/2
1. 前端基礎知識
1.1 為什么要關注前端頁面的性能，了解頁面的加載，渲染方式和順序？
因為前端作為客戶接觸最直接的交互點，前端頁面的展現速度直接決定了用戶體驗。
1.2 一次頁面請求會經歷哪些步驟？
（1）解析用戶輸入的域名，根據DNS服務匹配到對應的IP和端口
注意：host配置，DNS資源
（2）建立TCP連接（三次握手）
注意：網絡情況，端口，鏈路復用
（3）服務端接收到請求
注意：網絡情況
（4）服務端響應數據
注意：后端服務器的性能
（5）瀏覽器接收到數據
注意：網絡情況
（6）瀏覽器解析HTML代碼，獲取響應資源
注意：瀏覽器內核
（7）渲染頁面并最終展現給用戶
注意：瀏覽器內核
1.3 頁面的展示過程
（1）IE下載順序是從上到下，渲染的順序也是從上到下，下載和渲染同時進行。
（2）在渲染到頁面的某一部分時，上面所有部分都已下載完成（不是所有相關聯的元素）。
（3）如果遇到語義解釋性標簽嵌入文件（CSS,JS），此時IE會啟動單獨鏈接進行下載。
（4）CSS表在下載完成后，將和以前下載的所有樣式表一起解析，解析完成后，對此前所有元素重新進行渲染。
（5）JS，CSS中如有重定義，后定義函數將覆蓋前定義函數。
思考：CSS, JS如何加載？？？
推薦此文：css、js 的加載與執行
2. 前端性能測試的常用工具
2.1 Google Page Speed
在線測試網站性能工具，基于Google，最佳的前端性能規則，可得到大量的性能信息，提供了移動設備的最佳實踐報告。
2.2 Which loads faster
頁面加載對比工具，可以方便有效的對比優化前和優化后的數據，也可以用來做競品分析。
2.3 WebPageTest
實時瀏覽器（Chrome, Firefox, IE）的渲染速度工具，可選擇來自世界各地的幾個地點進行試驗。
2.4 瀏覽器的開發者工具
firefox的firebug
Chrome的開發者工具
IE的F12工具等
2.5 Fiddler
記錄并檢查電腦和互聯網之間的http通訊。設置斷點，查看所有進出Fiddler的數據（cookie, html, js, css等文件），支持自定義的插件開發。使用廣泛！
3. 前端性能優化的常見方法
3.1 DNS優化
（1）DNS：
域名系統，是互聯網的一項服務。作為將域名和IP地址相互映射的一個分布式數據庫，能夠使人更方便的訪問互聯網。
DNS由域名解析器和域名服務器組成：
域名解析器：是指把域名指向網站空間IP，讓注冊的域名可以方便的訪問到網站的一種服務。
域名服務器：是指保存有該網絡中所有主機的域名和對應IP地址，并具有將域名轉換為IP地址功能的服務器。域名必須對應一個IP地址，一個IP地址可同時對應多個域名，但IP地址不一定有域名。
（2）建議：
域名轉化成IP的過程也是需要消耗時間的，所以，盡可能在不同運營商的DNS服務中心添加自己公司的域名，能減少這一步所花費的時間。
3.2 減少HTTP請求
（1）問題：
因為HTTP基本都是短連接，過多的HTTP請求會消耗大量的時間在TCP連接建立上。網速相同時，下載一個100KB圖片比下載兩個50KB圖片要快。所以，要減少HTTP請求。
（2）常見的解決方案：
1）合并圖片，減少背景圖片數量。
2）捆綁文件，合并多個腳本css, js文件成一個，以減少文件下載數。
3）少引用外部資源。
4）瀏覽器緩存，用max-age設置緩存時間，配置ETags。
5）加載后下載(Post-Onload download)，使用內聯樣式表，動態下載外部腳本。
6）避免404,301,302重定向。
7）HTML文檔中盡量不要使用壓縮圖片。
3.3 減小請求元素的大小
（1）問題：
如果一次請求的數據量過大，會被切成更小包的傳輸，為了減少這個消耗，盡量傳輸小包。
（2）常見的解決方案：
1）壓縮腳本，Gzip壓縮。
2）壓縮圖片，改變圖片格式png，切圖。
3）精簡腳本，去除重復腳本。
4）控制cookie大小，合理設置過期時間。
3.4 使用CDN加速
（1）CDN，content delivery network，內容分發網絡。
（2）思路：
盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快更穩定
通過在網絡各處放置節點服務器所構成的 在現有的互聯網基礎上的 一層智能虛擬網絡，CDN系統
能夠實時地根據網絡流量，各節點的連接，負載狀況以及到用戶的距離和響應時間等，綜合信息將
用戶的請求重新導向離用戶最近的服務節點上。
3.5 其他優化方法
（1）CSS和JS放到外部文件中引用，CSS放頭，JS放尾。
（2）高效實用HTML標簽和CSS樣式。
（3）HTML相關知識：塊級元素，內聯元素，盒模型，SEO。
（4）CSS相關知識：渲染頁面的，考慮渲染效率問題。CSS選擇符從右向左進行匹配。
4. HTTP/2
（1）HTTP/2目前已經得到很多主流瀏覽器的支持和接入，所以要開始了解HTTP/2。
（2）HTTP/2和HTTP/1.1相比，有哪些區別：
1）HTTP/2采用二進制格式，而非文本格式。二進制協議解析更高效。
2）HTTP/2是完全多路復用，而非有序并阻塞的。只需一個連接即可實現并行。
（補充：HTTP/1.x的線端阻塞是什么？如何解決？）
3）使用報頭壓縮，HTTP/2降低了開銷。
4）HTTP/2讓服務器可以將響應主動“推送”到客戶端緩存中。
（3）補充知識點：
什么是幀，流？
如何實現共享連接？
總結
以上是生活随笔為你收集整理的性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql定时任务job_mysql 定
- 下一篇： 2022春招前端最新面试题分享(牧原股份