「前端那些事兒」② 優(yōu)化策略

前言

前端的工作并不僅僅是實現(xiàn)「視覺&交互稿」，想要開發(fā)一個高性能易維護(hù)的「完美」站點并未易事钮糖，針對前端的性能優(yōu)化貫穿著項目開發(fā)的始終弯院，絕不是交互口中的「拖拽工人」！

然而前端優(yōu)化策略卻是一件老生常談的問題契邀，百度一把大量的博文，曾拜讀過張成文大大的《現(xiàn)代前端技術(shù)解析》失暴，關(guān)于前端知識體系與架構(gòu)思維的一本書坯门，里面有一章講到前端優(yōu)化策略微饥，前人總結(jié)的較為全面，自知能補(bǔ)充的內(nèi)容也不多古戴，索性添添簡簡做一個優(yōu)化速查列表欠橘，以便后期回讀，同大家分享现恼。

PC瀏覽器前端優(yōu)化策略

PC端優(yōu)化的策略很多肃续，如 YSlow（YSlow 是 Yahoo 發(fā)布的一款 Firefox 插件微峰，現(xiàn) Chrome 也可安裝割去，可以對網(wǎng)站的頁面性能進(jìn)行分析，提出對該頁面性能優(yōu)化的建議）原則撒遣，或者 Chrome 自帶的 Audits 等喳逛，總結(jié)起來主要包括網(wǎng)絡(luò)加載類瞧捌、頁面渲染類、CSS 優(yōu)化類艺配、JavaScript 執(zhí)行類察郁、緩存類、圖片類转唉、架構(gòu)協(xié)議類等幾類皮钠，下面逐一介紹。

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

1．減少 HTTP 資源請求次數(shù)

在前端頁面中赠法，通常建議盡可能合并靜態(tài)資源圖片麦轰、JavaScript 或 CSS 代碼，減少頁面請求數(shù)和資源請求消耗砖织，這樣可以縮短頁面首次訪問的用戶等待時間款侵。通過構(gòu)建工具合并雪碧圖、CSS侧纯、JavaScript 文件等都是為了減少 HTTP 資源請求次數(shù)新锈。另外也要盡量避免重復(fù)的資源，防止增加多余請求眶熬。

2．減小 HTTP 請求大小

除了減少 HTTP 資源請求次數(shù)妹笆，也要盡量減小每個 HTTP 請求的大小。如減少沒必要的圖片娜氏、JavaScript拳缠、CSS 及 HTML 代碼，對文件進(jìn)行壓縮優(yōu)化贸弥，或者使用 gzip 壓縮傳輸內(nèi)容等都可以用來減小文件大小窟坐，縮短網(wǎng)絡(luò)傳輸?shù)却龝r延。前面我們使用構(gòu)建工具來壓縮靜態(tài)圖片資源以及移除代碼中的注釋并壓縮，目的都是為了減小 HTTP 請求的大小哲鸳。

3．將 CSS 或 JavaScript 放到外部文件中臣疑，避免使用<style>或<script>標(biāo)簽直接引入

在 HTML 文件中引用外部資源可以有效利用瀏覽器的靜態(tài)資源緩存，但有時候在移動端頁面 CSS 或 JavaScript 比較簡單的情況下為了減少請求徙菠，也會將 CSS 或 JavaScript 直接寫到 HTML 里面朝捆，具體要根據(jù) CSS 或 JavaScript 文件的大小和業(yè)務(wù)的場景來分析。如果 CSS 或 JavaScript 文件內(nèi)容較多懒豹，業(yè)務(wù)邏輯較復(fù)雜，建議放到外部文件引入驯用。

<link rel="stylesheet"  >
...
<script src="http://cdn.domain.com/path/main.js"></script>

4．避免頁面中空的 href 和 src

當(dāng)<link>標(biāo)簽的 href 屬性為空脸秽，或<script>、<img>蝴乔、<iframe>標(biāo)簽的 src 屬性為空時记餐，瀏覽器在渲染的過程中仍會將 href 屬性或 src 屬性中的空內(nèi)容進(jìn)行加載，直至加載失敗薇正，這樣就阻塞了頁面中其他資源的下載進(jìn)程片酝，而且最終加載到的內(nèi)容是無效的，因此要盡量避免挖腰。

<!--不推薦-->
<img src="" alt="photo" >
<a href="">點擊鏈接</a>

5．為 HTML 指定 Cache-Control 或 Expires

為 HTML 內(nèi)容設(shè)置 Cache-Control 或 Expires 可以將 HTML 內(nèi)容緩存起來雕沿，避免頻繁向服務(wù)器端發(fā)送請求。前面講到猴仑，在頁面 Cache-Control 或 Expires 頭部有效時审轮，瀏覽器將直接從緩存中讀取內(nèi)容，不向服務(wù)器端發(fā)送請求辽俗。

<meta http-equiv="Cache-Control" content="max-age=7200">
<meta http-equiv="Expires" content="Mon,20Jul201623:00:00GMT">

6．合理設(shè)置 Etag 和 Last-Modified

合理設(shè)置 Etag 和 Last-Modified 使用瀏覽器緩存疾渣，對于未修改的文件，靜態(tài)資源服務(wù)器會向瀏覽器端返回304崖飘，讓瀏覽器從緩存中讀取文件榴捡，減少 Web 資源下載的帶寬消耗并降低服務(wù)器負(fù)載。

<meta http-equiv="last-modified" content="Sun,05 Nov 2017 13:45:57 GMT">

7．減少頁面重定向

頁面每次重定向都會延長頁面內(nèi)容返回的等待延時朱浴，一次重定向大約需要200毫秒不等的時間開銷（無緩存）吊圾，為了保證用戶盡快看到頁面內(nèi)容，要盡量避免頁面重定向赊琳。

8．使用靜態(tài)資源分域存放來增加下載并行數(shù)

瀏覽器在同一時刻向同一個域名請求文件的并行下載數(shù)是有限的街夭，因此可以利用多個域名的主機(jī)來存放不同的靜態(tài)資源，增大頁面加載時資源的并行下載數(shù)躏筏，縮短頁面資源加載的時間板丽。通常根據(jù)多個域名來分別存儲 JavaScript、CSS 和圖片文件。

<link rel="stylesheet"  >
...
<script src="http://cdn2.domain.com/path/main.js"></script>

9．使用靜態(tài)資源 CDN 來存儲文件

如果條件允許埃碱，可以利用 CDN 網(wǎng)絡(luò)加快同一個地理區(qū)域內(nèi)重復(fù)靜態(tài)資源文件的響應(yīng)下載速度猖辫，縮短資源請求時間。

10．使用 CDN Combo 下載傳輸內(nèi)容

CDN Combo 是在 CDN 服務(wù)器端將多個文件請求打包成一個文件的形式來返回的技術(shù)砚殿，這樣可以實現(xiàn) HTTP 連接傳輸?shù)囊淮涡詮?fù)用啃憎，減少瀏覽器的 HTTP 請求數(shù)，加快資源下載速度似炎。例如同一個域名 CDN 服務(wù)器上的 a.js辛萍，b.js，c.js 就可以按如下方式在一個請求中下載羡藐。

<script src="http://cdn.domain.com/path/a.js,b.js,c.js"></script>

11．使用可緩存的 AJAX

對于返回內(nèi)容相同的請求贩毕，沒必要每次都直接從服務(wù)端拉取，合理使用 AJAX 緩存能加快 AJAX 響應(yīng)速度并減輕服務(wù)器壓力仆嗦。

$.ajax({
    url : url,
    type : 'get',
    cache : true, //推薦使用緩存
    data : {},
    success (){//...},
    error (){//...}
});

12．使用 GET 來完成 AJAX 請求

使用 XMLHttpRequest 時辉阶，瀏覽器中的 POST 方法會發(fā)起兩次 TCP 數(shù)據(jù)包傳輸，首先發(fā)送文件頭瘩扼，然后發(fā)送 HTTP 正文數(shù)據(jù)谆甜。而使用 GET 時只發(fā)送頭部，所以在拉取服務(wù)端數(shù)據(jù)時使用 GET 請求效率更高集绰。

$.ajax({
    url : url,
    type : 'get', //推薦使用get完成請求
    data : {},
    success (){//...},
    error(){//...}
});

13．減少 Cookie 的大小并進(jìn)行 Cookie 隔離

HTTP 請求通常默認(rèn)帶上瀏覽器端的 Cookie 一起發(fā)送給服務(wù)器规辱，所以在非必要的情況下，要盡量減少 Cookie 來減小 HTTP 請求的大小倒慧。對于靜態(tài)資源按摘，盡量使用不同的域名來存放，因為 Cookie 默認(rèn)是不能跨域的纫谅，這樣就做到了不同域名下靜態(tài)資源請求的 Cookie 隔離炫贤。

14．縮小 favicon.ico 并緩存

有利于 favicon.ico 的重復(fù)加載，因為一般一個 Web 應(yīng)用的 favicon.ico 是很少改變的付秕。

15．推薦使用異步 JavaScript 資源

異步的 JavaScript 資源不會阻塞文檔解析兰珍，所以允許在瀏覽器中優(yōu)先渲染頁面，延后加載腳本執(zhí)行询吴。例如 JavaScript 的引用可以如下設(shè)置掠河，也可以使用模塊化加載機(jī)制來實現(xiàn)。

<script src="main.js" defer></script>
<script src="main.js" async></script>

使用 async 時猛计，加載和渲染后續(xù)文檔元素的過程和 main.js 的加載與執(zhí)行是并行的唠摹。使用 defer 時，加載后續(xù)文檔元素的過程和 main.js 的加載是并行的奉瘤，但是 main.js 的執(zhí)行要在頁面所有元素解析完成之后才開始執(zhí)行勾拉。

16．消除阻塞渲染的 CSS 及 JavaScript

對于頁面中加載時間過長的 CSS 或 JavaScript 文件煮甥，需要進(jìn)行合理拆分或延后加載，保證關(guān)鍵路徑的資源能快速加載完成藕赞。

17．避免使用 CSS import 引用加載 CSS

CSS 中的 ＠import 可以從另一個樣式文件中引入樣式成肘，但應(yīng)該避免這種用法，因為這樣會增加 CSS 資源加載的關(guān)鍵路徑長度斧蜕，帶有 ＠import 的 CSS 樣式需要在 CSS 文件串行解析到 @import 時才會加載另外的 CSS 文件双霍，大大延后 CSS 渲染完成的時間。

<!--不推薦-->
<style>
    @import "path/main.css";
</style>

<!--推薦-->
<link rel="stylesheet"  >

頁面渲染類

1．把 CSS 資源引用放到 HTML 文件頂部

一般推薦將所有 CSS 資源盡早指定在 HTML 文檔 <head> 中批销，這樣瀏覽器可以優(yōu)先下載 CSS 并盡早完成頁面渲染洒闸。

2．JavaScript 資源引用放到 HTML 文件底部

JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的加載和解析執(zhí)行對頁面渲染造成阻塞。由于 JavaScript 資源默認(rèn)是解析阻塞的均芽，除非被標(biāo)記為異步或者通過其他的異步方式加載顷蟀，否則會阻塞 HTML DOM 解析和 CSS 渲染的過程。

3．盡量預(yù)先設(shè)定圖片等大小

在加載大量的圖片元素時骡技，盡量預(yù)先限定圖片的尺寸大小，否則在圖片加載過程中會更新圖片的排版信息羞反，產(chǎn)生大量的重排

4．不要在 HTML 中直接縮放圖片

在 HTML 中直接縮放圖片會導(dǎo)致頁面內(nèi)容的重排重繪布朦，此時可能會使頁面中的其他操作產(chǎn)生卡頓，因此要盡量減少在頁面中直接進(jìn)行圖片縮放昼窗。

5．減少 DOM 元素數(shù)量和深度

HTML 中標(biāo)簽元素越多是趴，標(biāo)簽的層級越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時間就越長澄惊，所以應(yīng)盡可能保持 DOM 元素簡潔和層級較少唆途。

<!--不推薦-->
<div>
    <span>
        <a href="javascript:void(0);">
            ![](./path/photo.jpg)
        </a>
    </span>
</div>

<!--推薦-->
![](./path/photo.jpg)

6．盡量避免在選擇器末尾添加通配符

CSS 解析匹配到 渲染樹的過程是從右到左的逆向匹配，在選擇器末尾添加通配符至少會增加一倍多計算量掸驱。

7．減少使用關(guān)系型樣式表的寫法

直接使用唯一的類名即可最大限度的提升渲染引擎繪制渲染樹等效率

8．盡量減少使用JS動畫

JS 直接操作 DOM 極容易引起頁面的重排

9．CSS 動畫使用 translate肛搬、scale 代替 top、height

盡量使用 CSS3 的 translate毕贼、scale 屬性代替 top温赔、left 和 height、width鬼癣，避免大量的重排計算

10．盡量避免使用<table>陶贼、<iframe>

<table> 內(nèi)容的渲染是將 table 的 DOM 渲染樹全部生成完并一次性繪制到頁面上的，所以在長表格渲染時很耗性能待秃，應(yīng)該盡量避免使用它拜秧，可以考慮使用列表元素 <ul> 代替。盡量使用異步的方式動態(tài)添加 iframe章郁，因為 iframe 內(nèi)資源的下載進(jìn)程會阻塞父頁面靜態(tài)資源的下載與 CSS 及 HTML DOM 的解析枉氮。

11．避免運(yùn)行耗時的 JavaScript

長時間運(yùn)行的 JavaScript 會阻塞瀏覽器構(gòu)建 DOM 樹、DOM 渲染樹、渲染頁面嘲恍。所以足画，任何與頁面初次渲染無關(guān)的邏輯功能都應(yīng)該延遲加載執(zhí)行，這和 JavaScript 資源的異步加載思路是一致的佃牛。

12．避免使用 CSS 表達(dá)式或 CSS 濾鏡

CSS 表達(dá)式或 CSS 濾鏡的解析渲染速度是比較慢的淹辞，在有其他解決方案的情況下應(yīng)該盡量避免使用。

//不推薦
.opacity{
    filter : progid : DXImageTransform.Microsoft.Alpha( opacity = 50 );
}

移動端瀏覽器前端優(yōu)化策略

相對于桌面端瀏覽器俘侠，移動端 Web 瀏覽器上有一些較為明顯的特點：設(shè)備屏幕較小象缀、新特性兼容性較好、支持一些較新的 HTML5 和 CSS3 特性爷速、需要與 Native 應(yīng)用交互等央星。但移動端瀏覽器可用的 CPU 計算資源和網(wǎng)絡(luò)資源極為有限，因此要做好移動端 Web 上的優(yōu)化往往需要做更多的事情惫东。首先莉给，在移動端 Web 的前端頁面渲染中，桌面瀏覽器端上的優(yōu)化規(guī)則同樣適用廉沮，此外針對移動端也要做一些極致的優(yōu)化來達(dá)到更好的效果颓遏。需要注意的是，并不是移動端的優(yōu)化原則在桌面瀏覽器端就不適用滞时，而是由于兼容性和差異性的原因叁幢，一些優(yōu)化原則在移動端更具代表性。

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

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

為了進(jìn)一步提升頁面加載速度曼玩，可以考慮將頁面的數(shù)據(jù)請求盡可能提前，避免在 JavaScript 加載完成后才去請求數(shù)據(jù)窒百。通常數(shù)據(jù)請求是頁面內(nèi)容渲染中關(guān)鍵路徑最長的部分黍判，而且不能并行，所以如果能將數(shù)據(jù)請求提前篙梢，可以極大程度上縮短頁面內(nèi)容的渲染完成時間样悟。

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

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

3．模塊化資源并行下載

在移動端資源加載中颁井，盡量保證 JavaScript 資源并行加載厅贪，主要指的是模塊化 JavaScript 資源的異步加載，例如AMD的異步模塊雅宾，使用并行的加載方式能夠縮短多個文件資源的加載時間养涮。

4．inline 首屏必備的 CSS 和 JavaScript

通常為了在 HTML 加載完成時能使瀏覽器中有基本的樣式，需要將頁面渲染時必備的 CSS 和 JavaScript 通過 <script> 或 <style> 內(nèi)聯(lián)到頁面中眉抬，避免頁面 HTML 載入完成到頁面內(nèi)容展示這段過程中頁面出現(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>
</html>

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

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

<!--cdn域名預(yù)解析-->
<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch"  >

6．資源預(yù)加載

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

7．合理利用MTU策略

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

緩存類

1．合理利用瀏覽器緩存

除了上面說到的使用 Cache-Control芹橡、Expires毒坛、Etag 和 Last-Modified 來設(shè)置 HTTP 緩存外，在移動端還可以使用 localStorage 等來保存 AJAX 返回的數(shù)據(jù)林说，或者使用 localStorage 保存 CSS 或 JavaScript 靜態(tài)資源內(nèi)容煎殷，實現(xiàn)移動端的離線應(yīng)用，盡可能減少網(wǎng)絡(luò)請求腿箩，保證靜態(tài)資源內(nèi)容的快速加載豪直。

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

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

3．嘗試使用 AMP HTML

AMP HTML 可以作為優(yōu)化前端頁面性能的一個解決方案勾习，使用 AMP Component 中的元素來代替原始的頁面元素進(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>

4．嘗試使用 PWA 模式

PWA（Progressive Web Apps）是 Google 提出的用前沿的 Web 技術(shù)為網(wǎng)頁提供 App 般使用體驗的一系列方案懈玻。

圖片類

1．圖片壓縮處理

在移動端巧婶，通常要保證頁面中一切用到的圖片都是經(jīng)過壓縮優(yōu)化處理的，而不是以原圖的形式直接使用的酪刀，因為那樣很消耗流量粹舵，而且加載時間更長。

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

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

.class-name{
    background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
}

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

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

![webp格式圖片](//cdn.domain.com/path/photo.webp)

4．圖片懶加載

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

![懶加載圖片](//cdn.domain.com/path/photo.jpg)

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

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

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

在頁面中盡可能使用 iconfont 來代替圖片圖標(biāo)，這樣做的好處有以下幾個：

  • 使用 iconfont 體積較小令杈，而且是矢量圖腻异，因此縮放時不會失真；
  • 可以方便地修改圖片大小尺寸和呈現(xiàn)顏色这揣。

但是需要注意的是悔常，iconfont 引用不同 webfont 格式時的兼容性寫法影斑，根據(jù)經(jīng)驗推薦盡量按照以下順序書寫，否則不容易兼容到所有的瀏覽器上机打。

@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．定義圖片大小限制

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

8．強(qiáng)緩存策略

對于一些「永遠(yuǎn)」不會變的圖片可以使用強(qiáng)緩存的方式緩存在用戶的瀏覽器上。

腳本類

1．盡量使用 id

選擇器選擇頁面 DOM 元素時盡量使用 id 選擇器空免，因為 id 選擇器速度最快空另。

2．合理緩存 DOM 對象

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

//不推薦
$('#mod.active').remove('active');
$('#mod.not-active').addClass('active');

//推薦
let $mod=$('#mod');
$mod.find('.active').remove('active');
$mod.find('.not-active').addClass('active');

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

使用事件代理可以避免對每個元素都進(jìn)行綁定坝咐，并且可以避免出現(xiàn)內(nèi)存泄露及需要動態(tài)添加元素的事件綁定問題循榆，所以盡量不要直接使用事件綁定。

//不推薦
$('.btn').on('click',function(e){
    console.log(this);
});

//推薦
$('body').on('click','.btn',function(e){
    console.log(this);
});

4．使用 touchstart 代替 click

由于移動端屏幕的設(shè)計墨坚， touchstart 事件和 click 事件觸發(fā)時間之間存在 300 毫秒的延時秧饮，所以在頁面中沒有實現(xiàn) touchmove 滾動處理的情況下，可以使用 touchstart 事件來代替元素的 click 事件泽篮，加快頁面點擊的響應(yīng)速度盗尸，提高用戶體驗。但同時我們也要注意頁面重疊元素 touch 動作的點擊穿透問題咪辱。

//不推薦
$('body').on('click','.btn',function(e){
    console.log(this);
});

//推薦
$('body').on('touchstart','.btn',function(e){
    console.log(this);
});

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

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

//不推薦
$('.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 代替連接符＋磷蛹，推薦使用 ECMAScript6 的字符串模板

這些都是一些基礎(chǔ)的安全腳本編寫問題，盡可能使用較高效率的特性來完成這些操作溪烤，避免不規(guī)范或不安全的寫法味咳。

7．盡量使用 ECMAScript6＋的特性來編程

ECMAScript6＋ 一定程度上更加安全高效庇勃，而且部分特性執(zhí)行速度更快，也是未來規(guī)范的需要槽驶，所以推薦使用 ECMAScript6＋ 的新特性來完成后面的開發(fā)责嚷。

渲染類

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

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

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

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

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

3．使用 CSS3 動畫，開啟GPU加速

使用 CSS3 動畫時可以設(shè)置 transform:translateZ(0) 來開啟移動設(shè)備瀏覽器的GPU圖形處理加速炮叶，讓動畫過程更加流暢碗旅，但需要注意的是，在 Native WebView 下 GPU 加速有幾率產(chǎn)生 App Crash镜悉。

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

4．合理使用 Canvas 和 requestAnimationFrame

選擇 Canvas 或 requestAnimationFrame 等更高效的動畫實現(xiàn)方式祟辟，盡量避免使用 setTimeout、setInterval 等方式來直接處理連續(xù)動畫侣肄。

5．SVG 代替圖片

部分情況下可以考慮使用 SVG 代替圖片實現(xiàn)動畫旧困，因為使用 SVG 格式內(nèi)容更小，而且 SVG DOM 結(jié)構(gòu)方便調(diào)整稼锅。

6．不濫用 float

在 DOM 渲染樹生成后的布局渲染階段吼具，使用 float 的元素布局計算比較耗性能，所以盡量減少 float 的使用矩距，推薦使用固定布局或 flex-box 彈性布局的方式來實現(xiàn)頁面元素布局拗盒。

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

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

8．做好腳本容錯

腳本容錯可以避免「非正常環(huán)境」的執(zhí)行錯誤影響頁面的加載和不相關(guān)功能的使用

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

1．嘗試使用 SPDY 和 HTTP2

在條件允許的情況下可以考慮使用 SPDY 協(xié)議來進(jìn)行文件資源傳輸陡蝇，利用連接復(fù)用加快傳輸過程，縮短資源加載時間哮肚。HTTP2 在未來也是可以考慮嘗試的登夫。

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

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

3．使用 NativeView 代替 DOM 的性能劣勢

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

總結(jié)

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

另外专酗，如果你有比較好的優(yōu)化點想要擴(kuò)充睹逃，歡迎下方評論。

鳴謝

再次致謝張成文大大的《現(xiàn)代前端技術(shù)解析》祷肯，推薦大家購買閱讀沉填。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市佑笋，隨后出現(xiàn)的幾起案子翼闹，更是在濱河造成了極大的恐慌，老刑警劉巖蒋纬，帶你破解...
    沈念sama閱讀 207,113評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件猎荠，死亡現(xiàn)場離奇詭異，居然都是意外死亡蜀备，警方通過查閱死者的電腦和手機(jī)关摇，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來碾阁，“玉大人输虱，你說我怎么就攤上這事≈祝” “怎么了宪睹？”我有些...
    開封第一講書人閱讀 153,340評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長艰猬。 經(jīng)常有香客問我横堡，道長埋市，這世上最難降的妖魔是什么冠桃？ 我笑而不...
    開封第一講書人閱讀 55,449評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮道宅，結(jié)果婚禮上食听，老公的妹妹穿的比我還像新娘胸蛛。我一直安慰自己，他們只是感情好樱报，可當(dāng)我...
    茶點故事閱讀 64,445評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布葬项。 她就那樣靜靜地躺著，像睡著了一般迹蛤。 火紅的嫁衣襯著肌膚如雪民珍。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,166評論 1贊 284
  • 城市分裂傳說
    那天盗飒，我揣著相機(jī)與錄音嚷量，去河邊找鬼。 笑死逆趣，一個胖子當(dāng)著我的面吹牛蝶溶，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播宣渗，決...
    沈念sama閱讀 38,442評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼抖所，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了痕囱？” 一聲冷哼從身側(cè)響起田轧，我...
    開封第一講書人閱讀 37,105評論 0贊 261
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎咐蝇，沒想到半個月后涯鲁，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,601評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡有序，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年抹腿，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片旭寿。...
    茶點故事閱讀 38,161評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡警绩，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出盅称，到底是詐尸還是另有隱情肩祥，我是刑警寧澤，帶...
    沈念sama閱讀 33,792評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布缩膝，位于F島的核電站混狠，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏疾层。R本人自食惡果不足惜将饺，卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧予弧，春花似錦刮吧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0贊 19
  • 一樁弒父案杀捻，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蚓庭，卻和暖如春致讥，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背器赞。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工拄踪， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人拳魁。 一個月前我還...
    沈念sama閱讀 45,618評論 2贊 355
  • 代替公主和親
    正文 我出身青樓惶桐，卻偏偏與公主長得像，于是被迫代替她去往敵國和親潘懊。 傳聞我的和親對象是個殘疾皇子姚糊，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2贊 344

推薦閱讀更多精彩內(nèi)容

  • 圍繞前端的性能多如牛毛，涉及到方方面面授舟，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進(jìn)行羅列注意救恨，是羅列不是展...
    流動碼文閱讀 674評論 0贊 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,522評論 25贊 707
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1贊 92
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,269評論 24贊 450
  • Spring boot默認(rèn)使用的是SimpleCacheConfiguration释树，即使用ConcurrentMa...
    xiaolyuh閱讀 1,647評論 0贊 6