前端性能優化（最全總結）

2019-03-18 by laifeipeng

前言

看了N多篇性能優化以後概括總結出本身的一套性能優化方案。若是以爲好，記得點贊！

前端性能優化從發送url開始到渲染，每一步均可以優化，後續的用戶交互體驗也能夠優化，最後就是打包構建優化和編碼優化。

1、資源請求過程優化

• 瀏覽器緩存
  • 強緩存
  • 協商緩存
  • localstorage緩存
  • service workers
• 減小 DNS 查找次數
• 配置多個域名
• http 改用http2（多路複用合併請求）
• 合併請求
• 減小資源字節數
• 採用cdn

2、首屏渲染優化

• css放在頭部、js放在底部
• 減小首屏加載的資源
  • 只加載關鍵的資源
  • 對關鍵資源進行資源提示（詳見資源提示）
  • 其餘非關鍵資源懶加載lazyload
• 異步無阻塞加載JS
  • defer
  • async
  • 動態建立script
• 資源提示（Resource Hints）
  • dns-prefetch
  • preconnect
  • prefetch
  • prerender
  • preload

3、構建優化

• 使用預編譯
• 使用 Tree-shaking、Scope hoisting、Code-splitting
  • 使用Tree-shaking能夠減小構建後文件的體積
  • 使用Scope Hoisting可讓代碼體積更小而且能夠下降代碼在運行時的內存開銷，同時它的運行速度更快
  • code-splitting能夠打包成多個chunk，以便按需加載資源
• 開啓gzip
• 使用CDN加速靜態資源加載（加快資源訪問速度，並且減小打包體積）
• 多頁面應用提取頁面間公共代碼，以利用緩存
• 壓縮js\css\html，移除註釋、空格等，小圖片使用base64嵌入減小一次http請求
• 服務端渲染（SSR）
• 使用import函數動態導入模塊
• 使用HTTP緩存頭

4、編碼優化

• JS
  • 數據訪問速度
  • 減小DOM操做
    • 緩存已經訪問過的元素；
    • 使用DocumentFragment暫存DOM，整理好之後再插入DOM樹；
    • 操做className，而不是屢次讀寫style；
    • 避免使用JavaScript修復佈局。
  • 單線程限制
    • 異步回調
    • 多線程API（Web Worker）
  • 優化算法，減小運行時間
  • js動畫使用requestAnimationframe函數
  • 對高頻觸發的事件進行節流或消抖
  • 善於使用事件委託
  • 將漸變或者會動畫元素放到單獨的繪製層中
• CSS
  • 減小cssom構建時間(少用通用選擇符，多用特定選擇符)
  • 開啓GPU加速
  • 少用css表達式、少用filter
  • 針對一些場景採用css內聯的方式
• 圖片
  • 圖片格式（webp>png>jpeg、gip）
  • 字體圖標代替圖片
  • css繪製圖片
  • 使用雪碧圖
  • 不要在HTML中縮放圖片
  • 使用體積小、可緩存的favicon.ico

結語

• 一、長路漫漫惟劍做伴，前端學習仍需努力。
• 二、其中資源提示參考：嗨，送你一張Web性能優化地圖
• 三、其中webpack優化參考:三十分鐘掌握Webpack性能優化