行動端HTML5效能最佳化

行動裝置HTML5效能最佳化 
[導讀] 得益於智慧型手機的普及和各行各業網路+的運動，行動端的市場佔比瘋狂成長。 2016年1月發布的2015年電商數據顯示，2015年中國行動端網購交易額年增123 2%，在網購總交易額中的佔比首次超越PC端達到55%。 
技術上，HTML5大行其道： 
1：有數據顯示，截至2015，有80%的App全部或部分基於HTML5。 
2：Google瀏覽器於9月1日起不在支援自動播放Flash。 
3：亞馬遜旗下網站（包括Amazon.com入口網站在內）的所有廣告將不再使用flash。在可預見的未來，flash廣告將被HTML5廣告所取代。 
行動裝置+HTML5，這個組合對前端工程師來說是個不小的挑戰：如何讓開發的頁面能有更好的體驗？這就是我們今天討論的話題：行動端HTML5頁面前端效能優化。 
php中文網HTML5培訓，如何優化HTML5在行動設定上的效能表現，首先需要明確以下幾個原則： 
1、PC優化手段在Mobile端同樣適用。 
2、在Mobile側我們提出三秒種渲染完成首屏指標。 
3、基於第二點，首屏載入3秒完成或使用Loading。 
4、基於聯通3G網路平均338KB/s(2.71Mb/s)，所以首屏資源不應超過1014KB。 
5、Mobile端因手機配置原因，除載入外渲染速度也是最佳化重點。 
6、基於第五點，要合理處理程式碼減少渲染損耗。 
7、基於第二、第五點，所有影響首屏載入和渲染的程式碼應在處理邏輯中後置。 
8、載入完成後使用者互動使用時也需注意效能。
我們針對其中幾個代表性方案進行探討： 
載入最佳化 
對於行動端的網頁來說，載入過程是最耗時的過程，可能會佔據總耗時的80%時間，因此是最佳化的重點，當然，手機站的其他前端要素最佳化也是不能忽略的。
1、減少HTTP請求 
因為手機瀏覽器同時回應請求為4個請求（Android支援4個，iOS 5後可支援6個），所以要盡量減少頁面的請求數，首次載入同時請求數不能超過4個，建議最佳化重點為以下2點： 
1、合併CSS、Java 
2、合併小圖片，使用雪碧圖 
2、快取 
用快取可以減少向伺服器的請求數，節省載入時間，所以所有靜態資源都要在伺服器端設定緩存，並且盡量使用長Cache（長Cache資源的更新可使用時間戳記）。
1、快取一切可緩存的資源 
2、使用長Cache（使用時間戳更新Cache） 
3、使用外聯式引用CSS、Java 
3、壓縮HTML、CSS、Java 
減少資源大小可加速網頁顯示速度，所以要對HTML、CSS、Java等進行程式碼壓縮，並在伺服器端設定GZip。
1、壓縮（例如，多餘的空格、換行符和縮排） 
2、啟用GZip 
4、無阻塞 
寫在HTML頭部的Java（無異步），和寫在HTML標籤中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部並使用Link方式引入，避免在HTML標籤中寫Style，Java放在頁面尾部或使用異步方式加載 
5、使用首屏加載 
首屏的快速顯示，可大幅提升使用者對頁面速度的感知，因此應盡量針對首屏的快速顯示做優化。 
6、隨選載入 
將不影響首屏的資源和目前螢幕資源不用的資源放到使用者需要時才加載，可以大幅提升重要資源的顯示速度和降低整體流量。 
1、LazyLoad 
2、滾屏載入 
3、透過Media Query載入 
另外，提醒大家一點：隨選載入會導致大量重繪，影響渲染效能。 
7、預先載入 
大型重型資源頁面（如遊戲）可使用增加Loading的方法，資源載入完成後再顯示頁面，但Loading時間過長，會造成使用者流失。 
1、可感知Loading(如進入空間遊戲的Loading) 
2、不可感知的Loading（如提前加載下一頁） 
3、對用戶行為分析，可在當前頁加載下一頁資源，提升速度。
8、壓縮圖片 
圖片是最佔流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然後使用智圖壓縮，同時在程式碼中用Srcset來按需顯示。 
1、使用智圖 
2、使用其它方式取代圖片（使用CSS3；使用SVG；使用IconFont） 
3、使用Srcset 
4、選擇合適的圖片（webP優於JPG；PNG8優於GIF） 
4、選擇合適的圖片（webP優於JPG；PNG8優於GIF） 🎜4、選擇合適的圖片（webP優於JPG；PNG8優於GIF） 🎜4、選擇合適的圖片（webP優於JPG；PNG8優於GIF） 🎜4、選擇合適的圖片（webP優於JPG；PNG8優於GIF） 🎜4、選擇合適的圖片（webP優於JPG；PNG8優於GIF） 🎜5.選擇適合的大小（首次載入不大於1014KB；基於手機螢幕一般寬度不寬於640） 
提醒大家一點：過度壓縮圖片大小影響圖片顯示效果。 
9、減少Cookie，避免重定向以及非同步載入第三方資源 
Cookie會影響載入速度，所以靜態資源網域不使用Cookie。另外，重定向會影響載入速度，所以在伺服器正確設定避免重定向。還有，第三方資源不可控會影響頁面的載入和顯示，因此要非同步載入第三方資源。 
腳本執行最佳化 
腳本處理不當會阻塞頁面載入、渲染，因此使用時需要注意以下幾點： 
1、CSS寫在頭部，Java寫在尾部或非同步。 
2、避免圖片和iFrame等的空Src，空Src會重新載入目前頁面，影響速度和效率。 
3、盡量避免重設圖片大小，重設圖片大小是指在頁面、CSS、Java等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響效能。 
4、圖片盡量避免使用DataURL，DataURL圖片沒有使用圖片的壓縮演算法檔案會變大，並且要解碼後再渲染，載入慢耗時長。 
CSS最佳化 
1、盡量避免在HTML標籤中寫Style屬性。 
2、避免CSS表達式，CSS表達式的執行需跳出CSS樹的渲染，因此請避免CSS表達式。 
3、移除空的CSS規則，空的CSS規則增加了CSS檔案的大小，且影響CSS樹的執行，所以需移除空的CSS規則。 
4、正確使用Display的屬性，Display屬性會影響頁面的渲染，建議各位站長要合理使用。
（1）、display:inline後不應該再使用width、height、margin、padding以及float 
（2）、display:inline-block後不應該再使用float 
（3）、display:block後不應該再使用使用vertical-align 
（4）、display:table-*後不應該再使用margin或float 
5、不濫用Float，Float在渲染時計算量比較大，盡量減少使用。 
6、不濫用Web字體，Web字體需要下載，解析，重繪當前頁面，盡量減少使用。 
7、不宣告過多的Font-size，過多的Font-size引發CSS樹的效率。 
8、值為0時不需要任何單位，為了瀏覽器的相容性和效能，值為0時不要帶單位。 
9、標準化各種瀏覽器前綴 
（1）、無前綴應放在最後。 
（2）、CSS動畫只使用（-webkit- 無前綴）兩種即可。 
（3）、其它前綴為「-webkit- -moz- -ms-無前綴」四種（-o-Opera瀏覽器改用blink內核，所以淘汰）。 
10、避免讓選擇符看起來像正規表示式。 
高級選擇器執行耗時長且不易讀懂，避免使用。
Java執行最佳化 
1、減少重繪和回流 
（1）、避免不必要的Dom操作 
（2）、盡量改變Class而不是Style，使用classList代替className 
（3）、避免使用document.write 
（4）、減少drawImage 
2、快取Dom選擇與計算，每次Dom選擇都要計算，快取他。 
3、快取列表.length，每次.length都要計算，用一個變數儲存這個值。 
4、盡量使用事件代理，避免批次綁定事件。 
5、盡量使用ID選擇器，ID選擇器是最快的。 
6、TOUCH事件優化，使用touchstart、touchend取代click，因快影響速度快，但應注意Touch反應過快，易引發誤操作。
渲染優化 
HTML文件是以包含文件編碼資訊的資料流方式在網絡間傳輸，頁面的編碼資訊一般會在HTTP響應的頭部資訊或在文件內的HTML標記中指明，客戶端瀏覽器只有在確定了頁面編碼後才能正確的渲染頁面，所以在繪製頁面或執行任何的java代碼前，大部分的瀏覽器（ie6、ie7、ie8除外）都會緩衝一定字節的數據來從中查找編碼信息，不同的瀏覽器當中預先緩衝的位元組數是不一樣的。 
1、HTML使用Viewport 
Viewport可以加速頁面的渲染，請使用以下程式碼： 
2、減少Dom節點 
Dom節點太多影響頁面的渲染，應盡量減少Dom節點。 
3、動畫最佳化 
（1）、盡量使用CSS3動畫。 
（2）、合理使用requestAnimationFrame動畫取代setTimeout。 
（3）、適當使用Canvas動畫5個元素以內使用css動畫，5個以上使用Canvas動畫（iOS8可使用webGL）。 
4、高頻事件最佳化 
Touchmove、Scroll事件可導致多次渲染。 
（1）、使用requestAnimationFrame監聽畫面變化，使得在正確的時間進行渲染。 
（2）、增加反應變化的時間間隔，減少重繪次數。 
5、GPU加速 

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

相關文章：

行動端HTML5頁端去掉input輸入框的白色背景與邊框（相容於Android和ios）

HTML55開發？跟PC端有什麼差別？

行動端HTML5應用，使用者真的有需求麼？有的話需求場景是什麼？