該如何優化前端性能

前言
發現總結性的小乾貨能夠爲你們提高更好的開發技巧和編碼思惟，對代碼量產化提供更紮實的質量和支持。此次咱們來聊聊你們可能都比較關心的話題：性能優化。

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

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

爲了方便記憶和閱讀，文章使用部分簡寫名詞，解釋以下
D端：桌面端頁面Desktop End Page

M端：移動端頁面Mobile End Page

概述指南
D端優化手段在M端一樣適用

在M端提出3秒鐘渲染完成首屏指標

基於第二點，首屏加載3秒內完成或使用Loading進行佔位

基於聯通3G網絡平均338kb/s(2.71mb/s)，首屏資源不該超過1014kb

M端因配置緣由，除加載外渲染速度也是優化重點

基於第五點，要合理處理代碼減小渲染損耗

基於第二點和第五點，全部影響首屏加載和渲染的代碼應在處理邏輯中後置

加載完成後，用戶交互使用時也需注意性能

加載優化
減小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%時間(優化重點)

執行優化
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 <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斷了？信號很差？話費用完了？

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

3秒鐘首屏指標
此規則適用於M端，顧名思義就是打開頁面後3秒鐘內完成渲染並展現內容。

結語寫到最後總結得差很少了，後續若是我想起還有哪些前端性能優化遺漏的，會繼續在這篇文章上補全，同時也但願各位朋友對文章裏的要點進行補充或者提出本身的看法。歡迎在下方進行評論或補充喔，喜歡的點個贊或收個藏，保證你在開發時用得上。