前端性能優化指南

時間 2019-11-05

標籤前端性能優化指南欄目系統性能简体版

原文原文鏈接

前言

繼上一篇《靈活運用JS開發技巧》獲得好評後，發現總結性的小乾貨能夠爲你們提高更好的開發技巧和編碼思惟，對代碼量產化提供更紮實的質量和支持。此次咱們來聊聊你們可能都比較關心的話題：性能優化。css

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

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

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

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

概述指南

D端優化手段在M端一樣適用
在M端提出3秒鐘渲染完成首屏指標
基於第二點，首屏加載3秒內完成或使用Loading進行佔位
基於聯通3G網絡平均338kb/s(2.71mb/s)，首屏資源不該超過1014kb
M端因配置緣由，除加載外渲染速度也是優化重點
基於第五點，要合理處理代碼減小渲染損耗
基於第二點和第五點，全部影響首屏加載和渲染的代碼應在處理邏輯中後置
加載完成後，用戶交互使用時也需注意性能

加載優化github

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

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

執行優化正則表達式

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

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

渲染優化canvas

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

<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 <link> Over @import：選擇<link>代替@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斷了？信號很差？話費用完了？