由于公司項(xiàng)目的前端處理邏輯及其多，導(dǎo)致頁面渲染卡頓，為了解決這個(gè)問題，故從網(wǎng)上找了好多資料，在這里統(tǒng)一整理一下。
主要從以下幾點(diǎn)展開描述。
一、為什么要優(yōu)化前端性能
- 小于100毫秒加載速度才是爽的
- 47%的用戶希望網(wǎng)頁能在兩秒或更短的時(shí)間內(nèi)加載
- 100ms到300ms 感覺良好
- 40% 的用戶當(dāng)網(wǎng)頁加載超過 3 秒，表示會(huì)放棄該網(wǎng)站
- 一秒鐘大概是用戶思路不被打斷的極限。用戶會(huì)感覺到延遲，但還可以接受
- 10秒左右是用戶注意力的極限。 大多數(shù)用戶會(huì)在10秒后離開你的網(wǎng)站
二、影響性能的幾個(gè)要素
- 網(wǎng)絡(luò)鏈路
域名解析、交換機(jī)、路由器、網(wǎng)絡(luò)服務(wù)提供商、內(nèi)容分發(fā)網(wǎng)絡(luò)、服務(wù)器等都會(huì)影響到前端渲染速度。 - 服務(wù)器資源
服務(wù)器無法響應(yīng)或響應(yīng)過慢也會(huì)直接影響頁面與用戶的互動(dòng)。 - 前端資源渲染效率
瀏覽器獲取所需 HTML、CSS、腳本、圖片等靜態(tài)資源，繪制首屏呈現(xiàn)給用戶的過程；或用戶與頁面交互后，瀏覽器重新計(jì)算需要呈現(xiàn)的內(nèi)容，然后重新繪制的過程。這些過程的處理效率也是影響性能的重要因素。 - 用戶端硬件
發(fā)起網(wǎng)絡(luò)請(qǐng)求，解析網(wǎng)絡(luò)響應(yīng)，頁面渲染繪制等過程都需要消耗計(jì)算機(jī)硬件資源。所以計(jì)算機(jī)資源，特別是 CPU 和 GPU 資源短缺時(shí)（比如打顯卡殺手類的游戲），也會(huì)影響頁面性能。
三、常用前端性能分析工具
常用的主要是Chrome Dev Tools 和 Audits。
-
Chrome Dev Tools
這個(gè)是谷歌瀏覽器自帶的工具，主要使用的有Network、Performance、Memory、JavaScript Profiler、Rendering
image.png-
Network
頁面中各種資源請(qǐng)求的情況，這里能看到資源的名稱、狀態(tài)、使用的協(xié)議(http1/http2/quic…)、資源類型、資源大小、資源時(shí)間線等情況。
本地分析性能時(shí)最好把網(wǎng)速調(diào)成slow 3G，可模擬最差網(wǎng)絡(luò)環(huán)境下的效果。
image.png
-
Network
image.png
- performance
頁面各項(xiàng)性能指標(biāo)的火焰圖，這里能看到白屏?xí)r間、FPS、資源加載時(shí)間線、longtask、內(nèi)存變化曲線等等信息。
image.png
- Memory
可以記錄某個(gè)時(shí)刻的頁面內(nèi)存情況，一般用于分析內(nèi)存泄露。 - JavaScript Profiler
可以記錄函數(shù)的耗時(shí)情況，方便找出耗時(shí)較多的函數(shù)。 - Rendering
可高亮顯示正在重新渲染的組件。
-
Audits（Lighthouse）
需要安裝google插件Lighthouse。點(diǎn)擊generate report一鍵生成測(cè)試報(bào)告。
可以根據(jù)給出的優(yōu)化方向?qū)ο到y(tǒng)進(jìn)行優(yōu)化。
image.png
image.png
- Yslow
- PageSpeed Insights
- Lighthouse
- WebPageTest
- Pingdom
- Sitespeed.io
- Calibre
- SpeedCurve
- SpeedTracker
四、常見的性能問題
- JavaScript 計(jì)算
- 大開銷輸入處理程序影響響應(yīng)或動(dòng)畫, 讓瀏覽器盡可能晚地處理觸摸和滾動(dòng)，或者綁定偵聽。
- 時(shí)機(jī)不當(dāng)?shù)?JavaScript 影響響應(yīng)、動(dòng)畫、加載, 使用requestAnimationFrame、使 DOM 操作遍布各個(gè)幀、使用網(wǎng)絡(luò)工作線程。
- 長(zhǎng)時(shí)間運(yùn)行的 JavaScript 影響響應(yīng), 將純粹的計(jì)算工作轉(zhuǎn)移到web worker中。如果需要 DOM 訪問權(quán)限，配合使用requestAnimationFrame。
- 重排
- 布局（或重排）是瀏覽器用來計(jì)算頁面上所有元素的位置和大小的過程。
- 網(wǎng)頁的布局模式意味著一個(gè)元素可能影響其他元素, 例如: body元素的寬度一般會(huì)影響其子元素的寬度以及樹中各處的節(jié)點(diǎn)等等。
- 重繪
- 繪制是填充像素的過程, 經(jīng)常是渲染流程開銷最大的部分。如果在任何情況下注意到頁面出現(xiàn)卡頓現(xiàn)象，很有可能存在繪制問題。
五、如何提高性能
- DOM 的多個(gè)讀操作（或多個(gè)寫操作），應(yīng)該放在一起。不要兩個(gè)讀操作之間，加入一個(gè)寫操作。
- 如果某個(gè)樣式是通過重排得到的，那么最好緩存結(jié)果。避免下一次用到的時(shí)候，瀏覽器又要重排。
- 只在必要的時(shí)候，才將元素的display屬性為可見，因?yàn)椴豢梢姷脑夭挥绊懼嘏藕椭乩L。另外，visibility : hidden的元素只對(duì)重繪有影響，不影響重排。
- 使用虛擬DOM的腳本庫(kù)，比如React等。
- 使用 window.requestAnimationFrame()、window.requestIdleCallback() 這兩個(gè)方法調(diào)節(jié)重新渲染。
- 使用http/2.0，該協(xié)議使用了多路復(fù)用，而http/1.1最大并發(fā)HTTP連接數(shù)有限制。
- 圖片等靜態(tài)資源可使用多個(gè)域名指向同一個(gè)IP，可提高并發(fā)數(shù)，但也不能用太多，會(huì)增加DNS查詢。
- 靜態(tài)資源使用使用cookie-free domains的方法
- 按需加載，圖片可使用懶加載
- 資源壓縮、http壓縮
- 使用webp圖片等小尺寸的圖片
- 開啟http緩存
參考文檔
前端性能分析利器-Chrome性能分析&性能監(jiān)視器： https://juejin.cn/post/6844904045774110733
前端性能優(yōu)化之利用 Chrome Dev Tools 進(jìn)行頁面性能分析： https://zhuanlan.zhihu.com/p/105561186
前端開發(fā) 8 大性能分析工具： https://zhuanlan.zhihu.com/p/187132148
