移動端瀏覽器前端優化策略

移動端的特色：設備屏幕較小、新特性兼容性較好、支持一些較新的 HTML5 和 CSS3 特性、須要與 Native 應用交互等。但移動端可用計算資源和網絡資源極爲有限，因此要作好移動端上的優化每每須要作更多的事情。

網絡加載類

首屏數據請求提早

首屏數據請求提早，避免在 JavaScript 加載完成後纔去後端請求數據。一般數據請求是頁面內容渲染中關鍵路徑最長的部分，並且不能並行，因此若是能將數據請求提早，能夠很大程度上縮短頁面內容的渲染時間。

首屏加載和按需加載

移動端網絡資源有限，爲了儘快完成頁面內容的加載，須要保證首屏加載資源最小，非首屏內容使用滾動的方式異步加載。通常推薦移動端頁面首屏數據展現延時最長不超過3秒。

inline 首屏必備的 CSS 和 JavaScript

爲了在 HTML 加載完成時能使瀏覽器中有基本的樣式，須要將頁面渲染時必備的 CSS 和 JavaScript 經過 <script> 或 <style> 內聯到頁面中，避免頁面 HTML 載入完成到頁面內容展現這段過程當中頁面出現空白。

模塊化資源並行下載

儘可能保證 JavaScript 資源並行加載，主要指的是模塊化 JavaScript 資源的異步加載，例如AMD的異步模塊，使用並行的加載方式可以縮短多個文件資源的加載時間。

meta dns prefetch 設置 DNS 預解析

設置文件資源的 DNS 預解析，讓瀏覽器提早解析獲取靜態資源的主機 IP，避免等到請求時才發起 DNS 解析請求。

<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch" href="//cdn.domain.com" >
複製代碼

資源預加載

對於移動端首屏加載後可能會被使用的資源，須要在首屏完成加載後儘快進行加載，保證在用戶須要瀏覽時已經加載完成。

利用MTU策略

一般狀況下，咱們 TCP 網絡傳輸的最大傳輸單元（Maximum Transmission Unit，MTU）爲 1500B，即一個RTT（Round-Trip Time，網絡請求往返時間）內能夠傳輸的數據量最大爲 1500 字節。所以，在先後端分離的開發模式中，儘可能保證頁面的 HTML 內容在 1KB 之內，這樣整個 HTML 的內容請求就能夠在一個 RTT 內請求完成，最大限度地提升 HTML 載入速度。

緩存類

利用瀏覽器緩存

使用 Cache-Control、Expires、Etag 和 Last-Modified 來設置 HTTP 緩存，還可使用 localStorage 等來保存從接口返回的數據，或者使用 localStorage 保存 CSS 或 JavaScript 靜態資源內容，實現移動端的離線應用，儘量減小網絡請求，保證靜態資源內容的快速加載。

靜態資源離線方案

對於移動端或 Hybrid 應用，能夠設置離線文件或離線包機制讓靜態資源請求從本地讀取，加快資源載入速度，並實現離線更新。

嘗試使用 AMP HTML

使用 AMP Component 中的元素來代替原始的頁面元素進行直接渲染。

圖片類

圖片壓縮處理

保證頁面中全部用到的圖片都是通過壓縮優化處理的，而不是以原圖的形式使用的。

使用較小的圖片，合理使用 base64 內嵌圖片

將小於2kb的圖片轉化成 base64 編碼嵌入到 HTML 頁面或 CSS 文件中，減小頁面的 HTTP 請求數。

使用更高壓縮比格式的圖片

使用具備較高壓縮比格式的圖片，如 webp（須要設計降級兼容方案）等。在同等圖片畫質的狀況下，高壓縮比格式的圖片體積更小，可以更快完成文件傳輸，節省網絡流量。

圖片懶加載

爲了保證頁面內容的最小化，加速頁面的渲染，儘量節省移動端網絡流量，頁面中的圖片資源推薦使用懶加載實現，在頁面滾動時動態載入圖片。

使用 MediaQuery 或 srcset 根據不一樣屏幕加載不一樣大小圖片

針對不一樣的移動端屏幕尺寸和分辨率，輸出不一樣大小的圖片或背景圖能保證在用戶體驗不下降的前提下節省網絡流量，加快部分機型的圖片加載速度。

使用 iconfont 代替圖片圖標

在頁面中儘量使用 iconfont 來代替圖片圖標，由於 iconfont 體積較小，並且是矢量圖，所以縮放時不會失真；還能夠方便地修改圖片大小尺寸和呈現顏色。

定義圖片大小限制

加載的單張圖片通常建議不超過 30KB，避免大圖片加載時間長而阻塞頁面其餘資源的下載。

腳本類

儘可能使用 id

選擇器選取頁面 DOM 元素時儘可能使用 id 選擇器，由於 id 選擇器速度最快。

合理緩存 DOM 對象

對於須要重複使用的 DOM 對象，要優先設置緩存變量，避免每次使用時都要從整個DOM樹中從新查找。

頁面元素儘可能使用事件代理，避免直接事件綁定

使用事件代理能夠避免對每一個元素都進行綁定，而且能夠避免出現內存泄露及須要動態添加元素的事件綁定問題，因此儘可能不要直接使用事件綁定。

使用 touchstart 代替 click

在移動端 touchstart 事件和 click 事件觸發時間之間存在 300 毫秒的延時，在頁面中沒有實現 touchmove 滾動處理的狀況下，可使用 touchstart 事件來代替元素的 click 事件，加快頁面點擊的響應速度，提升用戶體驗。但同時咱們也要注意頁面重疊元素 touch 動做的點擊穿透問題。

避免 touchmove、scroll 連續事件處理

對 touchmove、scroll 這類可能連續觸發回調的事件設置事件節流，例如設置每隔 16ms（60 幀的幀間隔爲 16.7ms，所以能夠合理地設置爲 16ms ）才進行一次事件處理，避免頻繁的事件調用致使移動端頁面卡頓。

渲染類

使用 Viewport 固定屏幕渲染

在移動端設置 Viewport 能夠避免縮放致使頁面重排重繪。在移動端固定 Viewport 設置的方法以下。

<!--設置viewport不縮放-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
複製代碼

避免各類形式重排重繪

頁面的重排重繪很耗性能，因此必定要儘量減小頁面的重排重繪，例如頁面圖片大小變化、元素位置變化等這些狀況都會致使重排重繪。

使用 CSS3 動畫，開啓GPU加速

使用 CSS3 動畫時設置 transform:translateZ(0) 來開啓移動設備瀏覽器的GPU圖形處理加速，讓動畫過程更加流暢，但在 Native WebView 下 GPU 加速有概率產生 App Crash。

-webkit-transform:translateZ(0);
    -ms-transform:translateZ(0);
     -o-transform:translateZ(0);
        transform:translateZ(0);
複製代碼

合理使用 Canvas 和 requestAnimationFrame

選擇 Canvas 或 requestAnimationFrame 等更高效的動畫實現方式，儘可能避免使用 setTimeout、setInterval 等方式來直接處理連續動畫。

SVG 代替圖片

能夠考慮使用 SVG 代替圖片實現動畫，由於使用 SVG 格式內容更小，並且 SVG DOM 結構方便調整。

不濫用 float

在 DOM 渲染樹生成後的佈局渲染階段，使用 float 的元素佈局計算比較耗性能，因此儘可能減小 float 的使用，推薦使用固定佈局或 flex-box 彈性佈局的方式來實現頁面元素佈局。

不濫用 web 字體或過多 font-size 聲明

過多的 font-size 聲明會增長字體的大小計算，並且也沒有必要的。

架構協議類

使用服務端渲染

服務端渲染的方式能夠加快頁面內容的渲染展現，避免空白頁面的出現，同時能夠解決移動端頁面SEO的問題。

使用 NativeView 代替 DOM 的性能劣勢

能夠嘗試使用 NativeView 的 MNV＊ 開發模式來避免 HTML DOM 性能慢的問題，目前使用 MNV＊ 的開發模式已經能夠將頁面內容渲染體驗作到接近客戶端 Native 應用的體驗了。但須要避免 js Framework 和 native Framework 的頻繁交互。