移動H5前端性能優化指南[托尼托尼研究所]

概述

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

[加載優化]

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

· 減少HTTP請求
因為手機瀏覽器同時響應請求為4個請求（Android支持4個，iOS 5后可支持6個），所以要盡量減少頁面的請求數，首次加載同時請求數不能超過4個
a) 合并CSS、JavaScript
b) 合并小圖片，使用雪碧圖

· 緩存
使用緩存可以減少向服務器的請求數，節省加載時間，所以所有靜態資源都要在服務器端設置緩存，并且盡量使用長Cache（長Cache資源的更新可使用時間戳）
a) 緩存一切可緩存的資源
b) 使用長Cache（使用時間戳更新Cache）
c) 使用外聯式引用CSS、JavaScript

· 壓縮HTML、CSS、JavaScript
減少資源大小可以加快網頁顯示速度，所以要對HTML、CSS、JavaScript等進行代碼壓縮，并在服務器端設置GZip
a) 壓縮（例如，多余的空格、換行符和縮進）
b) 啟用GZip

· 無阻塞
寫在HTML頭部的JavaScript（無異步），和寫在HTML標簽中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部并使用Link方式引入，避免在HTML標簽中寫Style，JavaScript放在頁面尾

部或使用異步方式加載

· 使用首屏加載
首屏的快速顯示，可以大大提升用戶對頁面速度的感知，因此應盡量針對首屏的快速顯示做優化

· 按需加載
將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量
PS：按需加載會導致大量重繪，影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過Media Query加載

· 預加載
大型重資源頁面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁面。但Loading時間過長，會造成用戶流失
對用戶行為分析，可以在當前頁加載下一頁資源，提升速度
a) 可感知Loading(如進入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁）

· 壓縮圖片
圖片是最占流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然后使用智圖壓縮，同時在代碼中用Srcset來按需顯示
PS：過度壓縮圖片大小影響圖片顯示效果
a) 使用智圖（ http://zhitu.tencent.com/ ）
b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 選擇合適的圖片(1. webP優于JPG 2. PNG8優于GIF)
e) 選擇合適的大小（1. 首次加載不大于1014KB 2. 不寬于640（基于手機屏幕一般寬度））

· 減少Cookie
Cookie會影響加載速度，所以靜態資源域名不使用Cookie

· 避免重定向
重定向會影響加載速度，所以在服務器正確設置避免重定向

· 異步加載第三方資源
第三方資源不可控會影響頁面的加載和顯示，因此要異步加載第三方資源

[腳本執行優化]

腳本處理不當會阻塞頁面加載、渲染，因此在使用時需當注意

· CSS寫在頭部，JavaScript寫在尾部或異步

· 避免圖片和iFrame等的空Src
空Src會重新加載當前頁面，影響速度和效率

· 盡量避免重設圖片大小
重設圖片大小是指在頁面、CSS、JavaScript等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能

· 圖片盡量避免使用DataURL
DataURL圖片沒有使用圖片的壓縮算法文件會變大，并且要解碼后再渲染，加載慢耗時長

[CSS優化]

· 盡量避免寫在HTML標簽中寫Style屬性

· 避免CSS表達式
CSS表達式的執行需跳出CSS樹的渲染，因此請避免CSS表達式

· 移除空的CSS規則
空的CSS規則增加了CSS文件的大小，且影響CSS樹的執行，所以需移除空的CSS規則

· 正確使用Display的屬性
Display屬性會影響頁面的渲染，因此請合理使用
a) display:inline后不應該再使用width、height、margin、padding以及float
b) display:inline-block后不應該再使用float
c) display:block后不應該再使用vertical-align
d) display:table-*后不應該再使用margin或者float

· 不濫用Float
Float在渲染時計算量比較大，盡量減少使用

· 不濫用Web字體
Web字體需要下載，解析，重繪當前頁面，盡量減少使用

· 不聲明過多的Font-size
過多的Font-size引發CSS樹的效率

· 值為0時不需要任何單位
為了瀏覽器的兼容性和性能，值為0時不要帶單位

· 標準化各種瀏覽器前綴
a) 無前綴應放在最后
b) CSS動畫只用 （-webkit- 無前綴）兩種即可
c) 其它前綴為 -webkit- -moz- -ms- 無前綴 四種，（-o-Opera瀏覽器改用blink內核，所以淘汰）

· 避免讓選擇符看起來像正則表達式
高級選擇器執行耗時長且不易讀懂，避免使用

[JavaScript執行優化]

· 減少重繪和回流
a) 避免不必要的Dom操作
b) 盡量改變Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 減少drawImage

· 緩存Dom選擇與計算
每次Dom選擇都要計算，緩存他

· 緩存列表.length
每次.length都要計算，用一個變量保存這個值

· 盡量使用事件代理，避免批量綁定事件

· 盡量使用ID選擇器
ID選擇器是最快的

· TOUCH事件優化
使用touchstart、touchend代替click，因快影響速度快。但應注意Touch響應過快，易引發誤操作

[渲染優化]

· HTML使用Viewport
Viewport可以加速頁面的渲染，請使用以下代碼

· 減少Dom節點
Dom節點太多影響頁面的渲染，應盡量減少Dom節點

· 動畫優化
a) 盡量使用CSS3動畫
b) 合理使用requestAnimationFrame動畫代替setTimeout
c) 適當使用Canvas動畫 5個元素以內使用css動畫，5個以上使用Canvas動畫（iOS8可使用webGL）

· 高頻事件優化
Touchmove、Scroll 事件可導致多次渲染
a) 使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染
b) 增加響應變化的時間間隔，減少重繪次數

· GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來觸發GPU渲染，請合理使用
PS：過渡使用會引發手機過耗電增加

為什么優化？

隨著移動互聯網的發展，我們越發要關注移動頁面的性能優化，今天跟大家談談這方面的事情。

     首先，為什么要最移動頁面進行優化？

     縱觀目前移動網絡的現狀，

          移動頁面布局越來越復雜，效果越來越炫，直接導致了文件越來越大，下載和運行速度越來越低，而速度低會造成不良影響，據統計：

          71%的用戶期望移動頁面跟pc頁面一樣快，74%的用戶能容忍的響應時間為5秒，所以我們必須保證移動端頁面有足夠的速度。

      移動頁面的速度跟三個因素有關，分別是：移動網絡帶寬速度，設備性能（CPU，GPU，瀏覽器），頁面本身。

      目前主流的移動網絡制式為3g

      今年，我們還看到了4g網絡制式在快速發展，這再一次提升了移動頁面的加載速度；

      而移動設備本身，截止到目前，以iphong6三星Note4等設備為首，智能設備已經變得比以往屏幕更大，CPU、GPU、內存更靠譜

      而與其同時，瀏覽器產商也為提升頁面的速度做出了不可磨滅的努力，這里大家可以看一個視頻（http://www.iqiyi.com/w_19rsgfld99.html）

      網絡制式供應商，手機制造商，瀏覽器產商如此給力，我們呢？我們能做什么。

      我們能做得是對移動端頁面本身優化，這也是我們專業價值的體現，所以我們必須做移動端頁面性能優化。

      該怎么做移動端頁面優化呢？

      在說這個前，要提一下pc常用的優化手段：

          代碼優化（css、html、js優化）

          減少HTTP請求（雪碧圖，文件合并…）

          減少DOM節點

          無阻塞（內聯CSS，JS置后…）

          緩存

          ...

      這些手段大部分適用于移動端，這都是一些耳熟能詳的手段，今天這里就講了，有興趣可以參考PDI課程《網站性能優化》。

      今天要講的主要是一些適用于移動端的優化手段，現在進入正題。

      首先我們得關注一下一個頁面從開始到呈現完畢需要經歷什么階段，主要有四個階段：

      每個階段的主要工作如上圖所示，而我們的優化目標是：

      下面我們來針對上面的幾個階段細說一下都有哪些優化手段。

      首先，來看看加載中有哪些優化手段：

      1. 預加載

      預加載方式有兩種：

      A.顯性加載

      類似這種用戶能明顯感知的，我把它稱為“顯性加載”，互動頁面都建議加上這種加載方式，它一方面能增加頁面的趣味性，另一方面能讓后續頁面體驗更流暢

      B.隱性加載

     這種在加載第一張圖片的時候已經預先加載了第二張圖片，從而使得頁面體驗更流暢的方式，我把它稱為隱性加載，這種方式的好處是節省流量之余又能使得體驗增強。

     2.    按需加載

     按需加載是不可或缺的優化手段，主要有以下兩種方式：

      對于這種方式，在首屏加載的時候把首屏的內容加載盡量，而位于首屏之外的元素都只在出現在首屏時才加載，很大程度地節省了流量，提升了首次加載時間。

      這種叫響應式加載方式，意思是利用js或者css判斷分辨率，從而選擇不同尺寸的圖片進行引入，這種的好處顯而易見，同樣可以加快加載速度和節省流量。

      3.    壓縮圖片

      對于壓縮圖片，首先要提的是jpg文件：

      對于移動端的Jpg文件，有這樣的結論：

           a.使用大尺寸大有損壓縮比的jpg

           b.使用jpegtran進行無損壓縮

      而對于png有以下結論：

           a.多彩圖片使用png24

           b.低彩圖片使用png8

           c.推薦使用pngquant

      4.盡量避免重定向

      為什么要盡量避免重定向呢？因為如圖：

      這是一個同一網速下的測試結果，重定向之所以會比較慢，是因為它重復了域名查找，tcp鏈接，發送請求。

      5. 使用其他方式代替圖片

      有兩種方式，第一種是：依靠css3繪制圖片

      第二種：使用iconfont代替圖片

      但iconfont不一定比圖片好，這里做了個實驗：

      對于大圖片，iconfont并不比雪碧圖好，建議單側小尺寸圖標才使用iconfont.

      然后，針對腳本執行中有哪些優化手段，這里只提兩點：

      1.盡量避免DataURI

      DataUri在移動端并不如它在pc端吃香，因為：

      經測試，DataURI要比簡單的外鏈資源慢6倍，生成的代碼文件相對圖片文件體積沒有減少反而增大，而且瀏覽器在對這種base64解碼過程中需要消耗內存和cpu，這個在移動端壞處特別明顯。

      2.點擊事件優化

      在移動端請適當使用touchstart，touchend，touch等事件代替延遲比較大的click事件。Click之所以慢是因為mousedown導致的：

      然后，針對渲染階段中有哪些優化手段，這里也只提兩點：

      1. 動畫優化

            a) 盡量使用css3動畫

            優點：

                不占用js主線程

                可利用硬件加速

                瀏覽器可對動畫做優化

             缺點：

                不支持中間狀態監聽

            b) 適當使用canvas動畫

            優點：

                可規避渲染樹的計算渲染更快

            缺點：

                開發成本高

                維護較麻煩

            通過對css3動畫和canvas動畫對比：

            得到結論：5個元素以內使用css3動畫，5個以上使用canvas動畫。

            c) 合理使用RAF(requestAnimationFrame)

            優點：

                能解決腳本問題引起的丟幀，卡頓問題

                支持中間狀態監聽

            缺點：

                兼容問題

            通過RAF動畫與settimeout動畫對比：

            得到結論：不需要兼容android 4.3瀏覽器的情況下，請使用RAF制作腳本動畫

      2. 高頻事件優化

      類似touchmove，scroll這類的事件可導致多次渲染，對于這種事件可以通過以下手段進行優化：

      1.使用requestAnimationFrame監聽幀變化，使得在正確的時間進行渲染

      2.增加響應變化的時間間隔，減少重繪次數。

      最后，針對合成/繪制只提一個優化手段：

        GPU加速

            觸發GPU加速的方式有：

                 CSS3 transitions

                      CSS3 3D transforms

                      WebGL 3D 繪制

                      Video

                      ...

            使用GPU加速前有對比實驗：

      GPU加速實際上是大幅減少了合成/繪制時間，從而大大地提高了頁面速度，但GPU加速有自己的缺點：

      過多的GPU層會帶來性能開銷，主要原因是使用GPU加速其實是利用了GPU層的緩存，讓渲染資源可以重復使用，所以一旦層多了，緩存增大，就會引起別的性能問題。

     總結

      本文針對頁面呈現的四個階段提出了比較典型的優化手段，到最后，再提醒讀者一下：其實優化是雙刃劍。

       按需加載提升速度，但可能導致大量重繪；

       Touch響應快，但很多場景不適合；

       GPU加速效率高，但內存開銷大等等

       Loading會讓整體體驗流暢，但容易造成用戶流失

       圖片壓縮讓帶寬成本降低，但可能會導致視覺效果變差

      類似這樣的矛盾點還有很多，請結合業務按照實際情況進行優化。