前端性能優化——加載優化、渲染優化

目錄

一.加載優化

1.首頁加載慢的優化

2.優化圖片的做法

3.實現 Webpack 打包優化

4.實現 CDN

二.渲染優化

1.渲染十萬條數據如何不造成卡頓

---

一.加載優化

1.首頁加載慢的優化

• 問題：首頁加載 圖片多、請求多、靜態資源（css、js、img）過大？
• 解決方案：

1. 懶加載，監聽滾動條事件，滾動條距離瀏覽器頂部的高度 = 圖片距離頂部的高度
2. 小圖標可以採用 iconfont-字體圖標 的方式解決
3. 小圖片可以採用 雪碧圖 / 精靈圖 的方式解決

• 問題：首頁的請求量過多怎麼解決？
• 解決方案：

1. Vue-UI 的儀表盤 和 瀏覽器的 Network 可以確定首頁加載的資源和請求量
2. 通過打包工具（Webpack）來做資源文件的 物理打包 （CDN緩存）

• 問題：只有通過合併靜態資源的方式才能減少資源請求量嗎？
• 解決方案：

1. babel插件 按需加載（如 element-ui）
2. 前端路由（僅限於 SPA應用）懶加載，點擊了才加載對應組件，import 相當於 promise對象，then()纔有結果

• 問題：首頁請求的資源（CSS、JS、圖片...）過大怎麼解決？
• 解決方案：

1. 開啓 gzip，進行全部資源壓縮
2. 對圖片進行轉碼——base64格式，自動化工具壓縮圖片——熊貓站
3. 源碼通過 gulp 等前端構建工具 進行壓縮打包

2.優化圖片的做法

1. 減少圖片的請求——懶加載
2. 減小圖片的大小——熊貓站、base64、WebP格式

• 熊貓站（自動化工具）：壓縮 PNG 和 JPG，通過減少顏色的數量以及不必要的數據來實現文件壓縮
• base64：使用 Webpack 的 url-loader 進行圖片策略配置，base64可以減少資源，但圖片體積增大
• WebP格式：同等條件等比例無損壓縮後的 WebP 比 PNG 文件少了 26％ 的體積

3.實現 Webpack 打包優化

1. 減少包數量
2. 減小包體積

• WebPack配置項：optimization：development / production
• 使用 Webpack 對代碼進行混淆和壓縮，並且可以使用 React lazy 進行拆包，結合路由進行按需加載
• 拆包後的文件，不可能同時加載的，所以就不會造成同一時間資源請求過多的請求
• optimization.splitChunks 打包策略的優化：將 node_modules 單獨打包，以及將自己實現的代碼也可以分爲公共包和非公共包，並且分開打包

4.實現 CDN

• CDN（內容分發網絡）：放靜態資源的服務器
• CDN 加速是因爲：很多地方都部署了 CDN 服務器，如果用戶需要下載靜態資源，會自動選擇 最近的節點 下載

二.渲染優化

1.渲染十萬條數據如何不造成卡頓

• 在瀏覽器中 最消耗性能的 —— 操作 DOM

1. element.innerHTML：把動態創建的元素追加到數組裏，然後一次性把所有的標籤進行渲染
2. document.createDocumentFragment 創建虛擬節點，當所有的 li 都創建後，一次性把虛擬節點裏的 li 全部渲染
3. 採取分段渲染的方式，最後使用 window.requestAnimationFrame 逐幀渲染