該如何優化前端性能

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

一說到頁面的性能優化，大家可能都會想起雅虎軍規、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壓縮圖像

使用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 <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秒鐘內完成渲染并展示內容。

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