移動(dòng)端的特點(diǎn)：設(shè)備屏幕較小、新特性兼容性較好、支持一些較新的 HTML5 和 CSS3 特性、需要與 Native 應(yīng)用交互等。但移動(dòng)端可用計(jì)算資源和網(wǎng)絡(luò)資源極為有限，所以要做好移動(dòng)端上的優(yōu)化往往需要做更多的事情。

網(wǎng)絡(luò)加載類(lèi)

首屏數(shù)據(jù)請(qǐng)求提前

首屏數(shù)據(jù)請(qǐng)求提前，避免在 JavaScript 加載完成后才去后端請(qǐng)求數(shù)據(jù)。通常數(shù)據(jù)請(qǐng)求是頁(yè)面內(nèi)容渲染中關(guān)鍵路徑最長(zhǎng)的部分，而且不能并行，所以如果能將數(shù)據(jù)請(qǐng)求提前，可以很大程度上縮短頁(yè)面內(nèi)容的渲染時(shí)間。

首屏加載和按需加載

移動(dòng)端網(wǎng)絡(luò)資源有限，為了盡快完成頁(yè)面內(nèi)容的加載，需要保證首屏加載資源最小，非首屏內(nèi)容使用滾動(dòng)的方式異步加載。一般推薦移動(dòng)端頁(yè)面首屏數(shù)據(jù)展示延時(shí)最長(zhǎng)不超過(guò)3秒。

inline 首屏必備的 CSS 和 JavaScript

為了在 HTML 加載完成時(shí)能使瀏覽器中有基本的樣式，需要將頁(yè)面渲染時(shí)必備的 CSS 和 JavaScript 通過(guò) <script> 或 <style> 內(nèi)聯(lián)到頁(yè)面中，避免頁(yè)面 HTML 載入完成到頁(yè)面內(nèi)容展示這段過(guò)程中頁(yè)面出現(xiàn)空白。

模塊化資源并行下載

盡量保證 JavaScript 資源并行加載，主要指的是模塊化 JavaScript 資源的異步加載，例如AMD的異步模塊，使用并行的加載方式能夠縮短多個(gè)文件資源的加載時(shí)間。

meta dns prefetch 設(shè)置 DNS 預(yù)解析

設(shè)置文件資源的 DNS 預(yù)解析，讓瀏覽器提前解析獲取靜態(tài)資源的主機(jī) IP，避免等到請(qǐng)求時(shí)才發(fā)起 DNS 解析請(qǐng)求。

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

資源預(yù)加載

對(duì)于移動(dòng)端首屏加載后可能會(huì)被使用的資源，需要在首屏完成加載后盡快進(jìn)行加載，保證在用戶需要瀏覽時(shí)已經(jīng)加載完成。

利用MTU策略

通常情況下，我們 TCP 網(wǎng)絡(luò)傳輸?shù)淖畲髠鬏攩卧∕aximum Transmission Unit，MTU）為 1500B，即一個(gè)RTT（Round-Trip Time，網(wǎng)絡(luò)請(qǐng)求往返時(shí)間）內(nèi)可以傳輸?shù)臄?shù)據(jù)量最大為 1500 字節(jié)。因此，在前后端分離的開(kāi)發(fā)模式中，盡量保證頁(yè)面的 HTML 內(nèi)容在 1KB 以內(nèi)，這樣整個(gè) HTML 的內(nèi)容請(qǐng)求就可以在一個(gè) RTT 內(nèi)請(qǐng)求完成，最大限度地提高 HTML 載入速度。

緩存類(lèi)

利用瀏覽器緩存

使用 Cache-Control、Expires、Etag 和 Last-Modified 來(lái)設(shè)置 HTTP 緩存，還可以使用 localStorage 等來(lái)保存從接口返回的數(shù)據(jù)，或者使用 localStorage 保存 CSS 或 JavaScript 靜態(tài)資源內(nèi)容，實(shí)現(xiàn)移動(dòng)端的離線應(yīng)用，盡可能減少網(wǎng)絡(luò)請(qǐng)求，保證靜態(tài)資源內(nèi)容的快速加載。

靜態(tài)資源離線方案

對(duì)于移動(dòng)端或 Hybrid 應(yīng)用，可以設(shè)置離線文件或離線包機(jī)制讓靜態(tài)資源請(qǐng)求從本地讀取，加快資源載入速度，并實(shí)現(xiàn)離線更新。

嘗試使用 AMP HTML

使用 AMP Component 中的元素來(lái)代替原始的頁(yè)面元素進(jìn)行直接渲染。

圖片類(lèi)

圖片壓縮處理

保證頁(yè)面中所有用到的圖片都是經(jīng)過(guò)壓縮優(yōu)化處理的，而不是以原圖的形式使用的。

使用較小的圖片，合理使用 base64 內(nèi)嵌圖片

將小于2kb的圖片轉(zhuǎn)化成 base64 編碼嵌入到 HTML 頁(yè)面或 CSS 文件中，減少頁(yè)面的 HTTP 請(qǐng)求數(shù)。

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

使用具有較高壓縮比格式的圖片，如 webp（需要設(shè)計(jì)降級(jí)兼容方案）等。在同等圖片畫(huà)質(zhì)的情況下，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸，節(jié)省網(wǎng)絡(luò)流量。

圖片懶加載

為了保證頁(yè)面內(nèi)容的最小化，加速頁(yè)面的渲染，盡可能節(jié)省移動(dòng)端網(wǎng)絡(luò)流量，頁(yè)面中的圖片資源推薦使用懶加載實(shí)現(xiàn)，在頁(yè)面滾動(dòng)時(shí)動(dòng)態(tài)載入圖片。

使用 MediaQuery 或 srcset 根據(jù)不同屏幕加載不同大小圖片

針對(duì)不同的移動(dòng)端屏幕尺寸和分辨率，輸出不同大小的圖片或背景圖能保證在用戶體驗(yàn)不降低的前提下節(jié)省網(wǎng)絡(luò)流量，加快部分機(jī)型的圖片加載速度。

使用 iconfont 代替圖片圖標(biāo)

在頁(yè)面中盡可能使用 iconfont 來(lái)代替圖片圖標(biāo)，因?yàn)?iconfont 體積較小，而且是矢量圖，因此縮放時(shí)不會(huì)失真；還可以方便地修改圖片大小尺寸和呈現(xiàn)顏色。

定義圖片大小限制

加載的單張圖片一般建議不超過(guò) 30KB，避免大圖片加載時(shí)間長(zhǎng)而阻塞頁(yè)面其他資源的下載。

腳本類(lèi)

盡量使用 id

選擇器選取頁(yè)面 DOM 元素時(shí)盡量使用 id 選擇器，因?yàn)?id 選擇器速度最快。

合理緩存 DOM 對(duì)象

對(duì)于需要重復(fù)使用的 DOM 對(duì)象，要優(yōu)先設(shè)置緩存變量，避免每次使用時(shí)都要從整個(gè)DOM樹(shù)中重新查找。

頁(yè)面元素盡量使用事件代理，避免直接事件綁定

使用事件代理可以避免對(duì)每個(gè)元素都進(jìn)行綁定，并且可以避免出現(xiàn)內(nèi)存泄露及需要?jiǎng)討B(tài)添加元素的事件綁定問(wèn)題，所以盡量不要直接使用事件綁定。

使用 touchstart 代替 click

在移動(dòng)端 touchstart 事件和 click 事件觸發(fā)時(shí)間之間存在 300 毫秒的延時(shí)，在頁(yè)面中沒(méi)有實(shí)現(xiàn) touchmove 滾動(dòng)處理的情況下，可以使用 touchstart 事件來(lái)代替元素的 click 事件，加快頁(yè)面點(diǎn)擊的響應(yīng)速度，提高用戶體驗(yàn)。但同時(shí)我們也要注意頁(yè)面重疊元素 touch 動(dòng)作的點(diǎn)擊穿透問(wèn)題。

避免 touchmove、scroll 連續(xù)事件處理

對(duì) touchmove、scroll 這類(lèi)可能連續(xù)觸發(fā)回調(diào)的事件設(shè)置事件節(jié)流，例如設(shè)置每隔 16ms（60 幀的幀間隔為 16.7ms，因此可以合理地設(shè)置為 16ms ）才進(jìn)行一次事件處理，避免頻繁的事件調(diào)用導(dǎo)致移動(dòng)端頁(yè)面卡頓。

渲染類(lèi)

使用 Viewport 固定屏幕渲染

在移動(dòng)端設(shè)置 Viewport 可以避免縮放導(dǎo)致頁(yè)面重排重繪。在移動(dòng)端固定 Viewport 設(shè)置的方法如下。

<!--設(shè)置viewport不縮放-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

避免各種形式重排重繪

頁(yè)面的重排重繪很耗性能，所以一定要盡可能減少頁(yè)面的重排重繪，例如頁(yè)面圖片大小變化、元素位置變化等這些情況都會(huì)導(dǎo)致重排重繪。

使用 CSS3 動(dòng)畫(huà)，開(kāi)啟GPU加速

使用 CSS3 動(dòng)畫(huà)時(shí)設(shè)置 transform:translateZ(0) 來(lái)開(kāi)啟移動(dòng)設(shè)備瀏覽器的GPU圖形處理加速，讓動(dòng)畫(huà)過(guò)程更加流暢，但在 Native WebView 下 GPU 加速有幾率產(chǎn)生 App Crash。

-webkit-transform:translateZ(0);
    -ms-transform:translateZ(0);
     -o-transform:translateZ(0);
        transform:translateZ(0);

合理使用 Canvas 和 requestAnimationFrame

選擇 Canvas 或 requestAnimationFrame 等更高效的動(dòng)畫(huà)實(shí)現(xiàn)方式，盡量避免使用 setTimeout、setInterval 等方式來(lái)直接處理連續(xù)動(dòng)畫(huà)。

SVG 代替圖片

可以考慮使用 SVG 代替圖片實(shí)現(xiàn)動(dòng)畫(huà)，因?yàn)槭褂?SVG 格式內(nèi)容更小，而且 SVG DOM 結(jié)構(gòu)方便調(diào)整。

不濫用 float

在 DOM 渲染樹(shù)生成后的布局渲染階段，使用 float 的元素布局計(jì)算比較耗性能，所以盡量減少 float 的使用，推薦使用固定布局或 flex-box 彈性布局的方式來(lái)實(shí)現(xiàn)頁(yè)面元素布局。

不濫用 web 字體或過(guò)多 font-size 聲明

過(guò)多的 font-size 聲明會(huì)增加字體的大小計(jì)算，而且也沒(méi)有必要的。

架構(gòu)協(xié)議類(lèi)

使用服務(wù)端渲染

服務(wù)端渲染的方式可以加快頁(yè)面內(nèi)容的渲染展示，避免空白頁(yè)面的出現(xiàn)，同時(shí)可以解決移動(dòng)端頁(yè)面SEO的問(wèn)題。

使用 NativeView 代替 DOM 的性能劣勢(shì)

可以嘗試使用 NativeView 的 MNV＊ 開(kāi)發(fā)模式來(lái)避免 HTML DOM 性能慢的問(wèn)題，目前使用 MNV＊ 的開(kāi)發(fā)模式已經(jīng)可以將頁(yè)面內(nèi)容渲染體驗(yàn)做到接近客戶端 Native 應(yīng)用的體驗(yàn)了。但需要避免 js Framework 和 native Framework 的頻繁交互。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論