圍繞前端的性能多如牛毛，涉及到方方面面，我們將圍繞 PC 瀏覽器和移動(dòng)端瀏覽器的優(yōu)化策略進(jìn)行羅列 注意，是羅列不是展開(kāi)，遇到不會(huì)不懂的點(diǎn)還請(qǐng)站外擴(kuò)展

開(kāi)車速度有點(diǎn)快，坐穩(wěn)了。

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

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

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

(1)減少 HTTP 資源請(qǐng)求次數(shù)

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

(2)減小 HTTP 請(qǐng)求大小

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

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

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

1. <linkrel="stylesheet"href="//cdn.domain.com/path/main.css">

2. <scriptsrc="//cdn.domain.com/path/main.js"></script>

(4)避免頁(yè)面中空的 href 和 src

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

<!--不推薦-->

<img src="" alt="photo" >

<a href="">點(diǎn)擊鏈接</a>

(5)為 HTML 指定 Cache-Control 或 Expires

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

<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 使用瀏覽器緩存，對(duì)于未修改的文件，靜態(tài)資源服務(wù)器會(huì)向?yàn)g覽器端返回 304，讓瀏覽器從緩存中讀取文件，減少 Web 資源下載的帶寬消耗并降低服務(wù)器負(fù)載。

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

(7)減少頁(yè)面重定向

頁(yè)面每次重定向都會(huì)延長(zhǎng)頁(yè)面內(nèi)容返回的等待延時(shí)，一次重定向大約需要 200 毫秒不等的時(shí)間開(kāi)銷（無(wú)緩存），為了保證用戶盡快看到頁(yè)面內(nèi)容，要盡量避免頁(yè)面重定向。

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

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

<link rel="stylesheet" href="//cdn1.domain.com/path/main.css" >

...

<script src="//cdn2.domain.com/path/main.js"></script>

(9)使用靜態(tài)資源 CDN 來(lái)存儲(chǔ)文件

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

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

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

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

(11)使用可緩存的 AJAX

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

$.ajax({

url : url,

type : 'get',

cache : true, //推薦使用緩存

data : {},

success (){//...},

error (){//...}

});

(12)使用 GET 來(lái)完成 AJAX 請(qǐng)求

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

$.ajax({

url : url,

type : 'get', //推薦使用get完成請(qǐng)求

data : {},

success (){//...},

error(){//...}

});

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

HTTP 請(qǐng)求通常默認(rèn)帶上瀏覽器端的 Cookie 一起發(fā)送給服務(wù)器，所以在非必要的情況下，要盡量減少 Cookie 來(lái)減小 HTTP 請(qǐng)求的大小。對(duì)于靜態(tài)資源，盡量使用不同的域名來(lái)存放，因?yàn)?Cookie 默認(rèn)是不能跨域的，這樣就做到了不同域名下靜態(tài)資源請(qǐng)求的 Cookie 隔離。

(14)縮小 favicon.ico 并緩存

有利于 favicon.ico 的重復(fù)加載，因?yàn)橐话阋粋€(gè) Web 應(yīng)用的 favicon.ico 是很少改變的。

(15)推薦使用異步 JavaScript 資源

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

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

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

使用 async 時(shí)，加載和渲染后續(xù)文檔元素的過(guò)程和 main.js 的加載與執(zhí)行是并行的。使用 defer 時(shí)，加載后續(xù)文檔元素的過(guò)程和 main.js 的加載是并行的，但是 main.js 的執(zhí)行要在頁(yè)面所有元素解析完成之后才開(kāi)始執(zhí)行。

(16)消除阻塞渲染的 CSS 及 JavaScript

對(duì)于頁(yè)面中加載時(shí)間過(guò)長(zhǎng)的 CSS 或 JavaScript 文件，需要進(jìn)行合理拆分或延后加載，保證關(guān)鍵路徑的資源能快速加載完成。

(17)避免使用 CSS import 引用加載 CSS

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

<!--不推薦-->

<style>

@import "path/main.css";

</style>

<!--推薦-->

<link rel="stylesheet" href="//cdn1.domain.com/path/main.css" >

---

頁(yè)面渲染類

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

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

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

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

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

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

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

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

5．減少 DOM 元素?cái)?shù)量和深度

HTML 中標(biāo)簽元素越多，標(biāo)簽的層級(jí)越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時(shí)間就越長(zhǎng)，所以應(yīng)盡可能保持 DOM 元素簡(jiǎn)潔和層級(jí)較少。

<!--不推薦-->

<div>

<span>

<a href="javascript:void(0);">

<img src="./path/photo.jpg" alt="圖片">

</a>

</span>

</div>

<!--推薦-->

<img src="./path/photo.jpg" alt="圖片" >

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

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

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

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

8．盡量減少使用 JS 動(dòng)畫

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

9．CSS 動(dòng)畫使用 translate、scale 代替 top、height

盡量使用 CSS3 的 translate、scale 屬性代替 top、left 和 height、width，避免大量的重排計(jì)算

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

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

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

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

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

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

//不推薦

.opacity{

filter : progid : DXImageTransform.Microsoft.Alpha( opacity = 50 );

}

---

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

相對(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>

<head>

<meta charset="UTF-8">

<title>樣例</title>

<meta >

<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，避免等到請(qǐng)求時(shí)才發(fā)起 DNS 解析請(qǐng)求。通常在移動(dòng)端 HTML 中可以采用如下方式完成。

<!--cdn域名預(yù)解析-->

<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，即一個(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 載入速度。

緩存類

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="//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="//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)頁(yè)提供 App 般使用體驗(yàn)的一系列方案。

圖片類

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（需要設(shè)計(jì)降級(jí)兼容方案）等。在同等圖片畫質(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．使用 MediaQuery 或 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í)的兼容性寫法，根據(jù)經(jīng)驗(yàn)推薦盡量按照以下順序書寫，否則不容易兼容到所有的瀏覽器上。

@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)一步的改善。

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

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

腳本類

1．盡量使用 id

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

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

對(duì)于需要重復(fù)使用的 DOM 對(duì)象，要優(yōu)先設(shè)置緩存變量，避免每次使用時(shí)都要從整個(gè) 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．頁(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 代替連接符＋，推薦使用 ECMAScript6 的字符串模板

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

7．盡量使用 ECMAScript6＋的特性來(lái)編程

ECMAScript6＋ 一定程度上更加安全高效，而且部分特性執(zhí)行速度更快，也是未來(lái)規(guī)范的需要，所以推薦使用 ECMAScript6＋ 的新特性來(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è)置的方法如下。

<!--設(shè)置viewport不縮放-->

<meta >

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

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

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

使用 CSS3 動(dòng)畫時(shí)可以設(shè)置 transform:translateZ(0) 來(lái)開(kāi)啟移動(dòng)設(shè)備瀏覽器的 GPU 圖形處理加速，讓動(dòng)畫過(guò)程更加流暢，但需要注意的是，在 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 等更高效的動(dòng)畫實(shí)現(xiàn)方式，盡量避免使用 setTimeout、setInterval 等方式來(lái)直接處理連續(xù)動(dòng)畫。

5．SVG 代替圖片

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

6．不濫用 float

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

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

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

8．做好腳本容錯(cuò)

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

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

1．嘗試使用 SPDY 和 HTTP2

在條件允許的情況下可以考慮使用 SPDY 協(xié)議來(lái)進(jìn)行文件資源傳輸，利用連接復(fù)用加快傳輸過(guò)程，縮短資源加載時(shí)間。HTTP2 在未來(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．使用 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 的頻繁交互。

---

總結(jié)

關(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)的。