前端性能優化總結

目錄

• 目錄
• 參考文檔
• 前端性能總結
  • 加載優化
  • 腳本執行優化
  • CSS優化
  • JavaScript執行優化
• 快捷連結

參考文檔

【阮一峰網絡日志】網頁性能管理詳解

【淘寶團隊前端優化】無線性能優化：頁面可見時間與異步加載

移動H5前端性能優化指南

Chrome 渲染優化 - 層模型

前端性能總結

加載優化

加載過程是最為耗時的過程，可能會占到總耗時的80%時間，是以是優化的重點。

1.

減少HTTP請求

（合并CSS、JavaScript；需要多個icon的使用精靈圖，避免請求檔案過多）

2. 緩存（使用緩存可以減少向伺服器的請求數，節省加載時間；）

3.

壓縮HTML、CSS、JavaScript

4.

無阻塞

（寫在HTML頭部的JavaScript（無異步），和寫在HTML标簽中的Style會阻塞頁面的渲染，建議避免在HTML标簽中寫Style；建議JavaScript放在頁面尾）

5. 使用首屏加載//還不是很了解

6.

按需加載

（PS：按需加載會導緻大量重繪，影響渲染性能； LazyLoad；滾屏加載（比如手機端淘寶首頁）； 通過Media Query加載）

7. 預加載（大型重資源頁面（如遊戲）可使用增加Loading的方法； 可感覺Loading(如進入空間遊戲的Loading)；不可感覺的Loading（如提前加載下一頁））

8.

壓縮圖檔

（使用其它方式代替圖檔(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)；使用Srcset來按需顯示；選擇合适的圖檔(1. webP優于JPG 2. PNG8優于GIF)；選擇合适的大小（1. 首次加載不大于1014KB 2. 不寬于640（基于手機螢幕一般寬度）；）

9. 減少Cookie

10. 避免重定向

11. 異步加載第三方資源

12. 【淘寶團隊前端優化】無線性能優化：頁面可見時間與異步加載

腳本執行優化

1.CSS寫在頭部，JavaScript寫在尾部或異步

2. 避免圖檔和iFrame等的空Src

3.

盡量避免重設圖檔大小

(重設圖檔大小是指在頁面、CSS、JavaScript等中多次重置圖檔大小，多次重設圖檔大小會引發圖檔的多次重繪，影響性能)

4. 圖檔盡量避免使用DataURL

CSS優化

1.盡量

避免寫在HTML标簽中寫Style屬性

，但是還是有些優先級原因可能會無法避免用style頂替！important值

2. 避免CSS表達式、移除空的CSS規則

3.

正确使用Display的屬性

Display屬性會影響頁面的渲染，是以請合理使用

a) display:inline後不應該再使用width、height、margin、padding以及float

b) display:inline-block後不應該再使用float

c) display:block後不應該再使用vertical-align

d) display:table-*後不應該再使用margin或者float

4.

不濫用Float

（Float在渲染時計算量比較大，盡量減少使用）

5.

減少使用定位屬性

（fixed/absolute）（static元素處于文檔流中，其渲染速度是最快的）

5.

不濫用Web字型

6.

不聲明過多的Font-size

（過多會引發CSS樹的效率）

7. 值為0時不需要任何機關

8. 标準化各種浏覽器字首（無字首應放在最後； CSS動畫隻用 （-webkit- 無字首）兩種即可；其它字首為 -webkit- -moz- -ms- 無字首 四種）

使用編輯器的插件輔助即可

JavaScript執行優化

1.· 減少重繪和回流

2. 避免不必要的Dom操作

3. 盡量改變Class而不是Style，使用classList代替className

4. 避免使用document.write

5. 減少drawImage

6. 緩存Dom選擇與計算

7. 緩存清單.length（每次.length都要計算，用一個變量儲存這個值）

8. 盡量使用事件代理，避免批量綁定事件

9. 盡量使用ID選擇器

10. TOUCH事件優化（使用touchstart、touchend代替click，因快影響速度快。但應注意Touch響應過快，易引發誤操作）

快捷連結

全部React學習筆記的目錄 Click Here>>

全部Javascript學習筆記的目錄 Click Here>>

Less學習筆記 Click Here>>

安利一波前端開發推薦使用的工具 Click Here>>

ESLint問題記錄 Click Here>>

github各類實戰練習源碼下載下傳 Click Here>>

如果你覺得我的東西能幫到你，無限歡迎給我的github庫點個收藏Star~0v 0~