[[281062]]

前言

發現總結性的小干貨可以為大家提升更好的開發技巧和編碼思維，對代碼量產化提供更扎實的質量和支持。這次我們來聊聊大家可能都比較關心的話題：性能優化。

一說到頁面的性能優化，大家可能都會想起雅虎軍規、2-5-8原則、3秒鐘首屏指標等規則，這些規則在開發過程中不是強制要求的，但是有時候為了追求頁面性能的完美和體驗，就不得不對原有的代碼進行修改和優化。

下面就結合自己三年多的開發經驗和大量的項目實踐，整理出一些常用的性能優化要點，同時再羅列一下雅虎軍規、2-5-8原則、3秒鐘首屏指標這三個常用規則的要點。

為了方便記憶和閱讀，文章使用部分簡寫名詞，解釋如下

• D端：桌面端頁面Desktop End Page
• M端：移動端頁面Mobile End Page

概述指南

1. D端優化手段在M端同樣適用
2. 在M端提出3秒鐘渲染完成首屏指標
3. 基于第二點，首屏加載3秒內完成或使用Loading進行占位
4. 基于聯通3G網絡平均338kb/s(2.71mb/s)，首屏資源不應超過1014kb
5. M端因配置原因，除加載外渲染速度也是優化重點
6. 基于第五點，要合理處理代碼減少渲染損耗
7. 基于第二點和第五點，所有影響首屏加載和渲染的代碼應在處理邏輯中后置
8. 加載完成后，用戶交互使用時也需注意性能

加載優化

• 減少HTTP請求：盡量減少頁面的請求數(首次加載同時請求數不能超過4個)，移動設備瀏覽器同時響應請求為4個請求(Android支持4個，iOS5+支持6個)
  • 合并CSS和JS
  • 使用CSS精靈圖
• 緩存資源：使用緩存可減少向服務器的請求數，節省加載時間，所有靜態資源都要在服務器端設置緩存，并且盡量使用長緩存(使用時間戳更新緩存)
  • 緩存一切可緩存的資源
  • 使用長緩存
  • 使用外聯的樣式和腳本
• 壓縮代碼：減少資源大小可加快網頁顯示速度，對代碼進行壓縮，并在服務器端設置GZip
  • 壓縮代碼(多余的縮進、空格和換行符)
  • 啟用Gzip
• 無阻塞：頭部內聯的樣式和腳本會阻塞頁面的渲染，樣式放在頭部并使用link方式引入，腳本放在尾部并使用異步方式加載
• 首屏加載：首屏快速顯示可大大提升用戶對頁面速度的感知，應盡量針對首屏的快速顯示做優化
• 按需加載：將不影響首屏的資源和當前屏幕不用的資源放到用戶需要時才加載，可大大提升顯示速度和降低總體流量(按需加載會導致大量重繪，影響渲染性能)
  • 懶加載
  • 滾屏加載
  • Media Query加載
• 預加載：大型資源頁面可使用Loading，資源加載完成后再顯示頁面，但加載時間過長，會造成用戶流失
  • 可感知Loading：進入頁面時Loading
  • 不可感知Loading：提前加載下一頁
• 壓縮圖像：使用圖像時選擇最合適的格式和大小，然后使用工具壓縮，同時在代碼中用srcset來按需顯示(過度壓縮圖像大小影響圖像顯示效果)
  • 使用TinyJpg和TinyPng壓縮圖像
  • 使用CSS3、SVG、IconFont代替圖像
  • 使用img的srcset按需加載圖像
  • 選擇合適的圖像：webp優于jpg，png8優于gif
  • 選擇合適的大小：首次加載不大于1014kb、不寬于640px
  • PS切圖時D端圖像保存質量為80，M端圖像保存質量為60
• 減少Cookie：Cookie會影響加載速度，靜態資源域名不使用Cookie
• 避免重定向：重定向會影響加載速度，在服務器正確設置避免重定向
• 異步加載第三方資源：第三方資源不可控會影響頁面的加載和顯示，要異步加載第三方資源

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

執行優化

• CSS寫在頭部，JS寫在尾部并異步
• 避免img、iframe等的src為空：空src會重新加載當前頁面，影響速度和效率
• 盡量避免重置圖像大小：多次重置圖像大小會引發圖像的多次重繪，影響性能
• 圖像盡量避免使用DataURL：DataURL圖像沒有使用圖像的壓縮算法，文件會變大，并且要解碼后再渲染，加載慢耗時長

執行處理不當會阻塞頁面加載和渲染

渲染優化

• 設置viewport：HTML的viewport可加速頁面的渲染 

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1"> 

• 減少DOM節點：DOM節點太多影響頁面的渲染，盡量減少DOM節點
• 優化動畫
  • 盡量使用CSS3動畫
  • 合理使用requestAnimationFrame動畫代替setTimeout
  • 適當使用Canvas動畫：5個元素以內使用CSS動畫，5個元素以上使用Canvas動畫，iOS8+可使用WebGL動畫
• 優化高頻事件：scroll、touchmove等事件可導致多次渲染
  • 函數節流
  • 函數防抖
  • 使用requestAnimationFrame監聽幀變化：使得在正確的時間進行渲染
  • 增加響應變化的時間間隔：減少重繪次數
• GPU加速：使用某些HTML5標簽和CSS3屬性會觸發GPU渲染，請合理使用(過渡使用會引發手機耗電量增加)
  • HTML標簽：video、canvas、webgl
  • CSS屬性：opacity、transform、transition

樣式優化

• 避免在HTML中書寫style
• 避免CSS表達式：CSS表達式的執行需跳出CSS樹的渲染
• 移除CSS空規則：CSS空規則增加了css文件的大小，影響CSS樹的執行
• 正確使用display：display會影響頁面的渲染
  • display:inline后不應該再使用float、margin、padding、width和height
  • display:inline-block后不應該再使用float
  • display:block后不應該再使用vertical-align
  • display:table-*后不應該再使用float和margin
• 不濫用float：float在渲染時計算量比較大，盡量減少使用
• 不濫用Web字體：Web字體需要下載、解析、重繪當前頁面，盡量減少使用
• 不聲明過多的font-size：過多的font-size影響CSS樹的效率
• 值為0時不需要任何單位：為了瀏覽器的兼容性和性能，值為0時不要帶單位
• 標準化各種瀏覽器前綴
  • 無前綴屬性應放在最后
  • CSS動畫屬性只用-webkit-、無前綴兩種
  • 其它前綴為-webkit-、-moz-、-ms-、無前綴四種：Opera改用blink內核，-o-已淘汰
• 避免讓選擇符看起來像正則表達式：高級選擇符執行耗時長且不易讀懂，避免使用

腳本優化

• 減少重繪和回流
  • 避免不必要的DOM操作
  • 避免使用document.write
  • 減少drawImage
  • 盡量改變class而不是style，使用classList代替className
• 緩存DOM選擇與計算：每次DOM選擇都要計算和緩存
• 緩存.length的值：每次.length計算用一個變量保存值
• 盡量使用事件代理：避免批量綁定事件
• 盡量使用id選擇器：id選擇器選擇元素是最快的
• touch事件優化：使用tap(touchstart和touchend)代替click(注意touch響應過快，易引發誤操作)

常用規則

雅虎軍規

雅虎團隊通過大量實踐總結出以下7類35條前端優化規則，規則詳情請參考這位兄弟的《雅虎前端優化35條規則翻譯》。

• 內容
  • Make Fewer HTTP Requests：減少HTTP請求數
  • Reduce DNS Lookups：減少DNS查詢
  • Avoid Redirects：避免重定向
  • Make Ajax Cacheable：緩存AJAX請求
  • Postload Components：延遲加載資源
  • Preload Components：預加載資源
  • Reduce The Number Of DOM Elements：減少DOM元素數量
  • Split Components Across Domains：跨域拆分資源
  • Minimize The Number Of Iframes：減少iframe數量
  • No 404s：消除404錯誤
• 樣式
  • Put Stylesheets At The Top：置頂樣式
  • Avoid CSS Expressions：避免CSS表達式
  • Choose Over @import：選擇代替@import
  • Avoid Filters：避免濾鏡
• 腳本
  • Put Scripts At The Bottom：置底腳本
  • Make JavaScript And CSS External：使用外部JS和CSS
  • Minify JavaScript And CSS：壓縮JS和CSS
  • Remove Duplicate Scripts：刪除重復腳本
  • Minimize DOM Access：減少DOM操作
  • Develop Smart Event Handlers：開發高效的事件處理
• 圖像
  • Optimize Images：優化圖片
  • Optimize CSS Sprites：優化CSS精靈圖
  • Don't Scale Images In HTML：不在HTML中縮放圖片
  • Make Favicon.ico Small And Cacheable：使用小體積可緩存的favicon
• 緩存
  • Reduce Cookie Size：減少Cookie大小
  • Use Cookie-Free Domains For Components：使用無Cookie域名的資源
• 移動端
  • Keep Components Under 25kb：保持資源小于25kb
  • Pack Components Into A Multipart Document：打包資源到多部分文檔中
• 服務器
  • Use A Content Delivery Network：使用CDN
  • Add An Expires Or A Cache-Control Header：響應頭添加Expires或Cache-Control
  • Gzip Components：Gzip資源
  • Configure ETags：配置ETags
  • Flush The Buffer Early：盡早輸出緩沖
  • Use Get For AJAX Requests：AJAX請求時使用get
  • Avoid Empty Image Src：避免圖片空鏈接

2-5-8原則

在前端開發中，此規則作為一種開發指導思路，針對瀏覽器頁面的性能優化。

• 用戶在2秒內得到響應，會感覺頁面的響應速度很快 Fast
• 用戶在2~5秒間得到響應，會感覺頁面的響應速度還行 Medium
• 用戶在5~8秒間得到響應，會感覺頁面的響應速度很慢，但還可以接受 Slow
• 用戶在8秒后仍然無法得到響應，會感覺頁面的響應速度垃圾死了(此時會有以下四種可能)
  • 難道是網速不好，發起第二次請求 => 刷新頁面
  • 什么垃圾頁面呀，怎么還不打開 => 離開頁面，有可能轉投競爭對手的網站
  • 垃圾程序猿，做的是什么頁面啊 => 咒罵開發此頁面的程序猿
  • 斷網了 => 網線斷了?Wi-Fi斷了?信號不好?話費用完了?

知道這個規則的數字順序怎樣來的嗎，看下鍵盤右方的數字鍵盤由下往上排序：2-5-8

3秒鐘首屏指標

此規則適用于M端，顧名思義就是打開頁面后3秒鐘內完成渲染并展示內容。

結語

寫到最后總結得差不多了，后續如果我想起還有哪些前端性能優化遺漏的，會繼續在這篇文章上補全，同時也希望各位朋友對文章里的要點進行補充或者提出自己的見解。歡迎在下方進行評論或補充喔，喜歡的點個贊或收個藏，保證你在開發時用得上。