前端性能優(yōu)化 —— 移動(dòng)端瀏覽器優(yōu)化策略

2018-01-10 09:07:29

前端性能優(yōu)化是一個(gè)很寬泛的概念，本書(shū)前面的部分也多多少少提到一些前端優(yōu)化方法，這也是我們一直在關(guān)注的一件重要事情。配合各種方式、手段、輔助系統(tǒng)，前端優(yōu)化的終目的都是提升用戶體驗(yàn)，改善頁(yè)面性能，我們常常竭盡全力進(jìn)行前端頁(yè)面優(yōu)化，但卻忽略了這樣做的效果和意義。先不急于探究前端優(yōu)化具體可以怎樣去做，先看看什么是前端性能，應(yīng)該怎樣去了解和評(píng)價(jià)前端頁(yè)面的性能。

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

首先，在移動(dòng)端Web的前端頁(yè)面渲染中，桌面瀏覽器端上的優(yōu)化規(guī)則同樣適用，此外針對(duì)移動(dòng)端也要做一些極致的優(yōu)化來(lái)達(dá)到更好的效果。需要注意的是，并不是移動(dòng)端的優(yōu)化原則在桌面瀏覽器端就不適用，而是由于兼容性和差異性的原因，一些優(yōu)化原則在移動(dòng)端更具代表性。

一、網(wǎng)絡(luò)加載類

1．首屏數(shù)據(jù)請(qǐng)求提前，避免JavaScript文件加載后才請(qǐng)求數(shù)據(jù)

為了進(jìn)一步提升頁(yè)面加載速度，可以考慮將頁(yè)面的數(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í)間。

2．首屏加載和按需加載，非首屏內(nèi)容滾屏加載，保證首屏內(nèi)容小化

由于移動(dòng)端網(wǎng)絡(luò)速度相對(duì)較慢，網(wǎng)絡(luò)資源有限，因此為了盡快完成頁(yè)面內(nèi)容的加載，需要保證首屏加載資源小化，非首屏內(nèi)容使用滾動(dòng)的方式異步加載。一般推薦移動(dòng)端頁(yè)面首屏數(shù)據(jù)展示延時(shí)長(zhǎng)不超過(guò)3秒。目前中國(guó)聯(lián)通3G的網(wǎng)絡(luò)速度為338KB/s（2.71Mb/s），所以推薦首屏所有資源大小不超過(guò)1014KB，即大約不超過(guò)1MB。

3．模塊化資源并行下載

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

4．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)空白。

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>樣例</title>

        <meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

        <style>

        /* 必備的首屏CSS */

        html, body{

            margin: 0;

            padding: 0;

            background-color: #ccc;

        }

        </style>

    </head>

    <body>

    </body>

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

設(shè)置文件資源的DNS預(yù)解析，讓瀏覽器提前解析獲取靜態(tài)資源的主機(jī)IP，避免等到請(qǐng)求時(shí)才發(fā)起DNS解析請(qǐng)求。通常在移動(dòng)端HTML中可以采用如下方式完成。

    

    <meta http-equiv="x-dns-prefetch-control" content="on">

    <link rel="dns-prefetch" href="//cdn.domain.com">

6．資源預(yù)加載

對(duì)于移動(dòng)端首屏加載后可能會(huì)被使用的資源，需要在首屏完成加載后盡快進(jìn)行加載，保證在用戶需要瀏覽時(shí)已經(jīng)加載完成，這時(shí)候如果再去異步請(qǐng)求就顯得很慢。

7．合理利用MTU策略

通常情況下，我們認(rèn)為TCP網(wǎng)絡(luò)傳輸?shù)拇髠鬏攩卧∕aximum Transmission Unit，MTU）為1500B，即網(wǎng)絡(luò)一個(gè)RTT（Round-Trip Time，網(wǎng)絡(luò)請(qǐng)求往返時(shí)間）時(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時(shí)間內(nèi)請(qǐng)求完成，大限度地提高HTML載入速度。

二、緩存類

1．合理利用瀏覽器緩存

除了上面說(shuō)到的使用Cache-Control、Expires、Etag和Last-Modified來(lái)設(shè)置HTTP緩存外，在移動(dòng)端還可以使用localStorage等來(lái)保存AJAX返回的數(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)容的快速加載。

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

對(duì)于移動(dòng)端或Hybrid應(yīng)用，可以設(shè)置離線文件或離線包機(jī)制讓靜態(tài)資源請(qǐng)求從本地讀取，加快資源載入速度，并實(shí)現(xiàn)離線更新。關(guān)于這塊內(nèi)容，我們會(huì)在后面的章節(jié)中重點(diǎn)講解。

3．嘗試使用AMP HTML

AMP HTML可以作為優(yōu)化前端頁(yè)面性能的一個(gè)解決方案，使用AMP Component中的元素來(lái)代替原始的頁(yè)面元素進(jìn)行直接渲染。

    

    <video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster="path/poster.jpg">

        <div fallback>

            <p>Your browser doesn’t support HTML5 video</p>

        </div>

        <source type="video/mp4" src="foo.mp4">

        <source type="video/webm" src="foo.webm">

    </video>





    

    <amp-video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster= "path/poster.jpg">

        <div fallback>

            <p>Your browser doesn’t support HTML5 video</p>

        </div>

        <source type="video/mp4" src="foo.mp4">

        <source type="video/webm" src="foo.webm">

    </amp-video>

三、圖片類

1．圖片壓縮處理

在移動(dòng)端，通常要保證頁(yè)面中一切用到的圖片都是經(jīng)過(guò)壓縮優(yōu)化處理的，而不是以原圖的形式直接使用的，因?yàn)槟菢雍芟牧髁?，而且加載時(shí)間更長(zhǎng)。

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

在頁(yè)面使用的背景圖片不多且較小的情況下，可以將圖片轉(zhuǎn)化成base64編碼嵌入到HTML頁(yè)面或CSS文件中，這樣可以減少頁(yè)面的HTTP請(qǐng)求數(shù)。需要注意的是，要保證圖片較小，一般圖片大小超過(guò)2KB就不推薦使用base64嵌入顯示了。

    .class-name {

           background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');

    }

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

使用具有較高壓縮比格式的圖片，如webp等。在同等圖片畫(huà)質(zhì)的情況下，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸，節(jié)省網(wǎng)絡(luò)流量。

    <img src="//cdn.domain.com/path/photo.webp" alt="webp格式圖片">

4．圖片懶加載

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

    <img data-src="//cdn.domain.com/path/photo.jpg" alt="懶加載圖片">

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

在介紹響應(yīng)式的章節(jié)中我們了解到，針對(duì)不同的移動(dòng)端屏幕尺寸和分辨率，輸出不同大小的圖片或背景圖能保證在用戶體驗(yàn)不降低的前提下節(jié)省網(wǎng)絡(luò)流量，加快部分機(jī)型的圖片加載速度，這在移動(dòng)端非常值得推薦。

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

在頁(yè)面中盡可能使用iconfont來(lái)代替圖片圖標(biāo)，這樣做的好處有以下幾個(gè)：使用iconfont體積較小，而且是矢量圖，因此縮放時(shí)不會(huì)失真；可以方便地修改圖片大小尺寸和呈現(xiàn)顏色。但是需要注意的是，iconfont引用不同webfont格式時(shí)的兼容性寫(xiě)法，根據(jù)經(jīng)驗(yàn)推薦盡量按照以下順序書(shū)寫(xiě)，否則不容易兼容到所有的瀏覽器上。

    @font-face {

        font-family: iconfont;

        src: url("./iconfont.eot");

        src: url("./iconfont.eot?#iefix") format("eot"),

             url("./iconfont.woff") format("woff"),

             url("./iconfont.ttf") format("truetype");

    }

7．定義圖片大小限制

加載的單張圖片一般建議不超過(guò)30KB，避免大圖片加載時(shí)間長(zhǎng)而阻塞頁(yè)面其他資源的下載，因此推薦在10KB以內(nèi)。如果用戶上傳的圖片過(guò)大，建議設(shè)置告警系統(tǒng)，幫助我們觀察了解整個(gè)網(wǎng)站的圖片流量情況，做出進(jìn)一步的改善。

四、腳本類

1．盡量使用id選擇器

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

2．合理緩存DOM對(duì)象

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

    // 不推薦

    $('#mod .active').remove('active');

    $('#mod .not-active').addClass('active');



    // 推薦

    let $mod = $('#mod');

    $mod.find('.active').remove('active');

    $mod.find('.not-active').addClass('active');

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

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

    // 不推薦

    $('.btn').on('click', function(e){

        console.log(this);

    });



    // 推薦

    $('body').on('click', '.btn', function(e){

        console.log(this);

    });

4．使用touchstart代替click

由于移動(dòng)端屏幕的設(shè)計(jì)，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)題。

    // 不推薦

    $('body').on('click', '.btn', function(e){

        console.log(this);

    });



    // 推薦

    $('body').on('touchstart', '.btn', function(e){

        console.log(this);

    });

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

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

    // 不推薦

    $('.scroller').on('touchmove', '.btn', function(e){

        console.log(this);

    });



    // 推薦

    $('.scroller').on('touchmove', '.btn', function(e){

        let self = this;

        setTimeout(function(){

            console.log(self);

        }, 16);

    });

6．避免使用eval、with，使用join代替連接符+，推薦使用ECMAScript 6的字符串模板

這些都是一些基礎(chǔ)的安全腳本編寫(xiě)問(wèn)題，盡可能使用較高效率的特性來(lái)完成這些操作，避免不規(guī)范或不安全的寫(xiě)法。

7．盡量使用ECMAScript 6+的特性來(lái)編程

ECMAScript 6+一定程度上更加安全高效，而且部分特性執(zhí)行速度更快，也是未來(lái)規(guī)范的需要，所以推薦使用ECMAScript 6+的新特性來(lái)完成后面的開(kāi)發(fā)。

五、渲染類

1．使用Viewport固定屏幕渲染，可以加速頁(yè)面渲染內(nèi)容

一般認(rèn)為，在移動(dòng)端設(shè)置Viewport可以加速頁(yè)面的渲染，同時(shí)可以避免縮放導(dǎo)致頁(yè)面重排重繪。在移動(dòng)端固定Viewport設(shè)置的方法如下。

    

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2．避免各種形式重排重繪

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

3．使用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ò)程更加流暢。

    -webkit-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);

4．合理使用Canvas和requestAnimationFrame

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

5．SVG代替圖片

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

6．不濫用float

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

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

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

六、架構(gòu)協(xié)議類

1．嘗試使用SPDY和HTTP 2

在條件允許的情況下可以考慮使用SPDY協(xié)議來(lái)進(jìn)行文件資源傳輸，利用連接復(fù)用加快傳輸過(guò)程，縮短資源加載時(shí)間。HTTP 2在未來(lái)也是可以考慮嘗試的。

2．使用后端數(shù)據(jù)渲染

使用后端數(shù)據(jù)渲染的方式可以加快頁(yè)面內(nèi)容的渲染展示，避免空白頁(yè)面的出現(xiàn)，同時(shí)可以解決移動(dòng)端頁(yè)面SEO的問(wèn)題。如果條件允許，后端數(shù)據(jù)渲染是一個(gè)很不錯(cuò)的實(shí)踐思路。后面的章節(jié)會(huì)詳細(xì)介紹后端數(shù)據(jù)渲染的相關(guān)內(nèi)容。

3．使用Native View代替DOM的性能劣勢(shì)

可以嘗試使用Native View的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)了。

關(guān)于頁(yè)面優(yōu)化的常用技術(shù)手段和思路主要包括以上這些，盡管列舉出很多，但仍可能有少數(shù)遺漏，可見(jiàn)前端性能優(yōu)化不是一件簡(jiǎn)簡(jiǎn)單單的事情，其涉及的內(nèi)容很多。大家可以根據(jù)實(shí)際情況將這些方法應(yīng)用到自己的項(xiàng)目當(dāng)中，要想全部做到幾乎是不可能的，但做到用戶可接受的原則還是很容易實(shí)現(xiàn)的。

于此同時(shí)我們要清楚的是，在我們做到了極致優(yōu)化的同時(shí)也付出了很大的代價(jià)，這也是前端優(yōu)化的一個(gè)問(wèn)題。理論上這些優(yōu)化都是可以實(shí)現(xiàn)的，但是作為工程師我們也要明白懂得權(quán)衡。優(yōu)化提升了用戶體驗(yàn)，使數(shù)據(jù)加載更快，但是項(xiàng)目代碼卻可能打亂，異步內(nèi)容要拆分出來(lái)，首屏的一個(gè)雪碧圖可能要分成兩個(gè)，頁(yè)面項(xiàng)目代碼維護(hù)成本成倍增加，項(xiàng)目結(jié)構(gòu)也可能變得混亂。

所以前期在設(shè)計(jì)構(gòu)建、組件的解決方案時(shí)要解決好異步的自動(dòng)處理問(wèn)題。任何一部分優(yōu)化都可以做得很深入，但不一定都值得，在優(yōu)化的同時(shí)也要盡量考慮性價(jià)比，這才是我們作為一名前端工程師處理前端優(yōu)化時(shí)應(yīng)該具有的正確思維。

上一篇：軟件開(kāi)發(fā)測(cè)試 7個(gè)無(wú)用的測(cè)試指標(biāo)

下一篇：淺談網(wǎng)絡(luò)劫持的原理及影響

前端性能優(yōu)化 —— 移動(dòng)端瀏覽器優(yōu)化策略

我們能做什么

為什么選擇我們

聯(lián)系我們