從 10 多秒到 1.05 秒！前端性能優(yōu)化實(shí)踐

作者：子木

轉(zhuǎn)發(fā)鏈接：segmentfault.com/a/1190000015052545

前言

關(guān)于 性能優(yōu)化 是個(gè)大的面，這篇文章主要涉及到前端的幾個(gè)點(diǎn)，如 前端性能優(yōu)化 的流程、常見(jiàn)技術(shù)手段、工具等。

提及 前端性能優(yōu)化 ，大家應(yīng)該都會(huì)想到 雅虎軍規(guī)，本文會(huì)結(jié)合 雅虎軍規(guī) 融入自己的了解知識(shí)，進(jìn)行的總結(jié)和梳理。

雅虎軍規(guī)

首先，我們先來(lái)看看“雅虎軍規(guī)”的35條：

盡量減少 HTTP 請(qǐng)求個(gè)數(shù)——須權(quán)衡
使用 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
為文件頭指定 Expires 或 Cache-Control ，使內(nèi)容具有緩存性。
避免空的 src 和 href
使用 gzip 壓縮內(nèi)容
把 css 放到頂部
把 JS 放到底部
避免使用 CSS 表達(dá)式
將 CSS 和 JS 放到外部文件中
減少 DNS 查找次數(shù)
精簡(jiǎn) CSS 和 JS
避免跳轉(zhuǎn)
剔除重復(fù)的 JS 和 CSS
配置 ETags
詩(shī) AJAX 可緩存
盡早刷新輸出緩沖
使用 GET 來(lái)完成 AJAX 請(qǐng)求
延遲加載
預(yù)加載
減少 DOM 元素個(gè)數(shù)
根據(jù)域名劃分頁(yè)面內(nèi)容
盡量減少 iframe 的個(gè)數(shù)
避免 404
減少 Cookie 的大小
使用無(wú) cookie 的域
減少 DOM 訪問(wèn)
開(kāi)發(fā)智能事件處理程序
用代替 @import
避免使用濾鏡
優(yōu)化圖像
優(yōu)化 CSS Spirite
不要在 html 中縮放圖像——須權(quán)衡
favicon.ico要小而且可緩存
保持單個(gè)內(nèi)容小于25K
打包組件成復(fù)合文本

如對(duì) 雅虎軍規(guī) 的具體細(xì)則內(nèi)容不是很了解，可自行訪問(wèn)這篇優(yōu)質(zhì)文章：前端性能優(yōu)化之雅虎35條軍規(guī) 了解詳情。

壓縮合并

對(duì)于 前端性能優(yōu)化 自然要關(guān)注首屏打開(kāi)速度，而這個(gè)速度，很大因素是花費(fèi)在網(wǎng)絡(luò)請(qǐng)求上，那么怎么減少網(wǎng)絡(luò)請(qǐng)求的時(shí)間呢？

減少網(wǎng)絡(luò)請(qǐng)求次數(shù)
減小文件體積
使用 CDN 加速

所以壓縮、合并就是一個(gè)解決方案，當(dāng)然可以用 gulp 、 webpack 、 grunt 等構(gòu)建工具壓縮、合并。

JS、CSS 壓縮、合并

例如：gulp js、css 壓縮、合并代碼如下：

//壓縮、合并jsgulp.task('scripts', function () {    return gulp.src([        './public/lib/fastclick/lib/fastclick.min.js',        './public/lib/jquery_lazyload/jquery.lazyload.js',        './public/lib/velocity/velocity.min.js',        './public/lib/velocity/velocity.ui.min.js',        './public/lib/fancybox/source/jquery.fancybox.pack.js',        './public/js/src/utils.js',        './public/js/src/motion.js',        './public/js/src/scrollspy.js',        './public/js/src/post-details.js',        './public/js/src/bootstrap.js',        './public/js/src/push.js',        './public/live2dw/js/perTips.js',        './public/live2dw/lib/L2Dwidget.min.js',        './public/js/src/love.js',        './public/js/src/busuanzi.pure.mini.js',        './public/js/src/activate-power-mode.js'    ]).pipe(concat('all.js')).pipe(minify()).pipe(gulp.dest('./public/dist/'));});// 壓縮、合并 CSSgulp.task('css', function () {    return gulp.src([        './public/lib/font-awesome/css/font-awesome.min.css',        './public/lib/fancybox/source/jquery.fancybox.css',        './public/css/main.css',        './public/css/lib.css',        './public/live2dw/css/perTips.css'    ]).pipe(concat('all.css')).pipe(minify()).pipe(gulp.dest('./public/dist/'));});

然后，再把 壓縮、合并 的 JS、CSS 放入 CDN，看看效果如何：

以上是 lishaoy.net 清除緩存后的首頁(yè)請(qǐng)求速度。

可見(jiàn)，請(qǐng)求時(shí)間是 4.59 s ，總請(qǐng)求個(gè)數(shù) 51 ，而 js 的請(qǐng)求個(gè)數(shù)是 8 ， css 的請(qǐng)求個(gè)數(shù)是 3 （其實(shí)就 all.css 一個(gè)，其它 2 個(gè)是 google瀏覽器加載的），而沒(méi)使用 壓縮、合并 時(shí)候，請(qǐng)求時(shí)間是 10 多秒，總請(qǐng)求個(gè)數(shù)有 70 多個(gè)， js 的請(qǐng)求個(gè)數(shù)是 20多個(gè) ，對(duì)比請(qǐng)求時(shí)間性能提升 1倍多。

如圖，有緩存下的首頁(yè)效果：

基本都是秒開(kāi) 。

Tips：在 壓縮、合并 后，單個(gè)文件控制在 25 ~ 30 KB左右，同一個(gè)域下，最好不要多于5個(gè)資源。

圖片壓縮、合并

例如：gulp 圖片壓縮代碼如下：

//壓縮imagegulp.task('imagemin', function () {    gulp.src('./public/**/*.{png,jpg,gif,ico,jpeg}')        .pipe(imagemin())        .pipe(gulp.dest('./public'));});

圖片的合并可以采用 CSSSpirite，方法就是把一些小圖用 PS 合成一張圖，用 css 定位顯示每張圖片的位置。

.top_right .phone {    background: url(../images/top_right.png) no-repeat 7px -17px;    padding: 0 38px;}.top_right .help {    background: url(../images/top_right.png) no-repeat 0 -47px;    padding: 0 38px;}

然后，把壓縮的圖片放入 CDN ，看看效果如何：

可見(jiàn)，請(qǐng)求時(shí)間是 1.70 s ,總請(qǐng)求個(gè)數(shù) 50 ，而 img 的請(qǐng)求個(gè)數(shù)是 15 （這里因?yàn)槭醉?yè)都是大圖，就沒(méi)有合并，只是壓縮了），但是，效果很好，從 4.59 s 縮短到 1.70 s, 性能又提升一倍。

再看看有緩存情況如何：

請(qǐng)求時(shí)間是 1.05 s ，有緩存和無(wú)緩存基本差不多。

Tips：大的圖片在不同終端，應(yīng)該使用不同分辨率，而不應(yīng)該使用縮放（百分比）

整個(gè) 壓縮、合并 （js、css、img）再放入 CDN ，請(qǐng)求時(shí)間從 10 多秒，到最后的1.70 s，性能提升 5 倍多，可見(jiàn)，這個(gè)操作必要性。

緩存

緩存會(huì)根據(jù)請(qǐng)求保存輸出內(nèi)容的副本，例如 頁(yè)面、圖片、文件，當(dāng)下一個(gè)請(qǐng)求來(lái)到的時(shí)候:如果是相同的 URL，緩存直接使用本地的副本響應(yīng)訪問(wèn)請(qǐng)求，而不是向源服務(wù)器再次發(fā)送請(qǐng)求。因此，可以從以下 2 個(gè)方面提升性能。

減少響應(yīng)延遲，提升響應(yīng)時(shí)間
減少網(wǎng)絡(luò)帶寬消耗，節(jié)省流量

我們用兩幅圖來(lái)了解下瀏覽器的 緩存機(jī)制。

1、瀏覽器第一次請(qǐng)求

2、瀏覽器再次請(qǐng)求

從以上兩幅圖中，可以清楚的了解瀏覽器緩存的過(guò)程：

首次訪問(wèn)一個(gè) URL ，沒(méi)有緩存，但是，服務(wù)器會(huì)響應(yīng)一些 header 信息，如： expires、cache-control、last-modified、etag 等，來(lái)記錄下次請(qǐng)求是否緩存、如何緩存。
再次訪問(wèn)這個(gè) URL 時(shí)候，瀏覽器會(huì)根據(jù)首次訪問(wèn)返回的 header 信息，來(lái)決策是否緩存、如何緩存。

我們重點(diǎn)來(lái)分析下第二幅圖，其實(shí)是分兩條線路，如下。

第一條線路： 當(dāng)瀏覽器再次訪問(wèn)某個(gè) URL 時(shí)，會(huì)先獲取資源的 header 信息，判斷是否命中強(qiáng)緩存（cache-control和expires），如命中，直接從緩存獲取資源，包括相應(yīng)的 header信息（請(qǐng)求不會(huì)和服務(wù)器通信），也就是 強(qiáng)緩存 ，如圖：

第二條線路： 如沒(méi)有命中 強(qiáng)緩存 ，瀏覽器會(huì)發(fā)送請(qǐng)求到服務(wù)器，請(qǐng)求會(huì)攜帶第一次請(qǐng)求返回的有關(guān)緩存的 header 信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服務(wù)器根據(jù)請(qǐng)求中的相關(guān) header 信息來(lái)比對(duì)結(jié)果是否協(xié)商緩存命中；若命中，則服務(wù)器返回新的響應(yīng) header 信息更新緩存中的對(duì)應(yīng) header 信息，但是并不返回資源內(nèi)容，它會(huì)告知瀏覽器可以直接從緩存獲取；否則返回最新的資源內(nèi)容，也就是 協(xié)商緩存。

現(xiàn)在，我們了解到瀏覽器緩存機(jī)制分為 強(qiáng)緩存、協(xié)商緩存，再來(lái)看看他們的區(qū)別：

與強(qiáng)緩存相關(guān)的 header 字段有兩個(gè)：

1、expires

expires： 這是 http1.0 時(shí)的規(guī)范，它的值為一個(gè)絕對(duì)時(shí)間的 GMT 格式的時(shí)間字符串，如 Mon,10Jun201521:31:12GMT ，如果發(fā)送請(qǐng)求的時(shí)間在 expires 之前，那么本地緩存始終有效，否則就會(huì)發(fā)送請(qǐng)求到服務(wù)器來(lái)獲取資源。

2、cache-control

cache-control：max-age=number ，這是 http1.1 時(shí)出現(xiàn)的 header 信息，主要是利用該字段的 max-age 值來(lái)進(jìn)行判斷，它是一個(gè)相對(duì)值；資源第一次的請(qǐng)求時(shí)間和Cache-Control 設(shè)定的有效期，計(jì)算出一個(gè)資源過(guò)期時(shí)間，再拿這個(gè)過(guò)期時(shí)間跟當(dāng)前的請(qǐng)求時(shí)間比較，如果請(qǐng)求時(shí)間在過(guò)期時(shí)間之前，就能命中緩存，否則未命中，cache-control 除了該字段外，還有下面幾個(gè)比較常用的設(shè)置值：

no-cache： 不使用本地緩存。需要使用緩存協(xié)商，先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改，如果之前的響應(yīng)中存在 ETag ，那么請(qǐng)求的時(shí)候會(huì)與服務(wù)端驗(yàn)證，如果資源未被更改，則可以避免重新下載。
no-store： 直接禁止瀏覽器緩存數(shù)據(jù)，每次用戶請(qǐng)求該資源，都會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，每次都會(huì)下載完整的資源。
public： 可以被所有的用戶緩存，包括終端用戶和 CDN 等中間代理服務(wù)器。
private： 只能被終端用戶的瀏覽器緩存，不允許 CDN 等中繼緩存服務(wù)器對(duì)其緩存。

Tips：如果 cache-control 與 expires 同時(shí)存在的話，cache-control 的優(yōu)先級(jí)高于 expires。

協(xié)商緩存

協(xié)商緩存都是由瀏覽器和服務(wù)器協(xié)商，來(lái)確定是否緩存，協(xié)商主要通過(guò)下面兩組 header 字段，這兩組字段都是成對(duì)出現(xiàn)的，即第一次請(qǐng)求的響應(yīng)頭帶上某個(gè)字段（Last-Modified或者 Etag ），則后續(xù)請(qǐng)求會(huì)帶上對(duì)應(yīng)的請(qǐng)求字段（If-Modified-Since 或者 If-None-Match ），若響應(yīng)頭沒(méi)有 Last-Modified 或者 Etag字段，則請(qǐng)求頭也不會(huì)有對(duì)應(yīng)的字段。

1、Last-Modified/If-Modified-Since

二者的值都是 GMT 格式的時(shí)間字符串，具體過(guò)程：

瀏覽器第一次跟服務(wù)器請(qǐng)求一個(gè)資源，服務(wù)器在返回這個(gè)資源的同時(shí)，在 respone 的 header 加上 Last-Modified字段，這個(gè) header 字段表示這個(gè)資源在服務(wù)器上的最后修改時(shí)間。
瀏覽器再次跟服務(wù)器請(qǐng)求這個(gè)資源時(shí)，在 request 的 header 上加上 If-Modified-Since 字段，這個(gè) header 字段的值就是上一次請(qǐng)求時(shí)返回的 Last-Modified 的值。
服務(wù)器再次收到資源請(qǐng)求時(shí)，根據(jù)瀏覽器傳過(guò)來(lái) If-Modified-Since 和資源在服務(wù)器上的最后修改時(shí)間判斷資源是否有變化，如果沒(méi)有變化則返回 304NotModified ，但是不會(huì)返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。當(dāng)服務(wù)器返回 304NotModified 的響應(yīng)時(shí)， response header 中不會(huì)再添加 Last-Modified的header ，因?yàn)榧热毁Y源沒(méi)有變化，那么 Last-Modified 也就不會(huì)改變，這是服務(wù)器返回 304 時(shí)的 response header。
瀏覽器收到 304 的響應(yīng)后，就會(huì)從緩存中加載資源。
如果協(xié)商緩存沒(méi)有命中，瀏覽器直接從服務(wù)器加載資源時(shí)，Last-Modified 的 Header 在重新加載的時(shí)候會(huì)被更新，下次請(qǐng)求時(shí)，If-Modified-Since 會(huì)啟用上次返回的Last-Modified 值。

2、Etag/If-None-Match

這兩個(gè)值是由服務(wù)器生成的每個(gè)資源的唯一標(biāo)識(shí)字符串，只要資源有變化就這個(gè)值就會(huì)改變；其判斷過(guò)程與 Last-Modified、If-Modified-Since 類(lèi)似，與 Last-Modified 不一樣的是，當(dāng)服務(wù)器返回 304NotModified 的響應(yīng)時(shí)，由于 ETag 重新生成過(guò)， response header中還會(huì)把這個(gè) ETag 返回，即使這個(gè) ETag 跟之前的沒(méi)有變化。

Tips：Last-Modified與ETag是可以一起使用的，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag，一致的情況下，才會(huì)繼續(xù)比對(duì)Last-Modified，最后才決定是否返回304。

Service Worker

1、什么是 Service Worker

Service Worker 本質(zhì)上充當(dāng)Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器，也可以在網(wǎng)絡(luò)可用時(shí)作為瀏覽器和網(wǎng)絡(luò)間的代理。它們旨在（除其他之外）使得能夠創(chuàng)建有效的離線體驗(yàn)，攔截網(wǎng)絡(luò)請(qǐng)求并基于網(wǎng)絡(luò)是否可用以及更新的資源是否駐留在服務(wù)器上來(lái)采取適當(dāng)?shù)膭?dòng)作。他們還允許訪問(wèn)推送通知和后臺(tái)同步API。

Service worker 可以解決目前離線應(yīng)用的問(wèn)題，同時(shí)也可以做更多的事。Service Worker 可以使你的應(yīng)用先訪問(wèn)本地緩存資源，所以在離線狀態(tài)時(shí)，在沒(méi)有通過(guò)網(wǎng)絡(luò)接收到更多的數(shù)據(jù)前，仍可以提供基本的功能（一般稱(chēng)之為 Offline First）。這是原生App 本來(lái)就支持的功能，這也是相比于 web app ，原生 app 更受青睞的主要原因。

再來(lái)看看 service worker 能做些什么：

后臺(tái)消息傳遞
網(wǎng)絡(luò)代理，轉(zhuǎn)發(fā)請(qǐng)求，偽造響應(yīng)
離線緩存
消息推送
...

本文主要以（lishaoy.net）資源緩存為例，闡述下 service worker如何工作。

2、生命周期

service worker 初次安裝的生命周期，如圖：

從上圖可知，service worker 工作的流程：

安裝： service worker URL 通過(guò) serviceWorkerContainer.register() 來(lái)獲取和注冊(cè)。
激活： 當(dāng) service worker 安裝完成后，會(huì)接收到一個(gè)激活事件(activate event)。 onactivate 主要用途是清理先前版本的 service worker 腳本中使用的資源。
監(jiān)聽(tīng)： 兩種狀態(tài)
終止以節(jié)省內(nèi)存；
監(jiān)聽(tīng)獲取 fetch 和消息 message 事件。
銷(xiāo)毀： 是否銷(xiāo)毀由瀏覽器決定，如果一個(gè) service worker 長(zhǎng)期不使用或者機(jī)器內(nèi)存有限，則可能會(huì)銷(xiāo)毀這個(gè) worker 。

Tips：激活成功之后，在 Chrome 瀏覽器里，可以訪問(wèn) chrome://inspect/#service-workers和 chrome://serviceworker-internals/ 可以查看到當(dāng)前運(yùn)行的service worker ，如圖：

現(xiàn)在，我們來(lái)寫(xiě)個(gè)簡(jiǎn)單的例子。

3、注冊(cè) service worker

要安裝 service worker ，你需要在你的頁(yè)面上注冊(cè)它。這個(gè)步驟告訴瀏覽器你的 service worker 腳本在哪里。

if ('serviceWorker' in navigator) {  navigator.serviceWorker.register('/sw.js').then(function(registration) {    // Registration was successful    console.log('ServiceWorker registration successful with scope: ',    registration.scope);  }).catch(function(err) {    // registration failed :(    console.log('ServiceWorker registration failed: ', err);  });}

上面的代碼檢查 service worker API 是否可用，如果可用， service worker/sw.js被注冊(cè)。如果這個(gè) service worker 已經(jīng)被注冊(cè)過(guò)，瀏覽器會(huì)自動(dòng)忽略上面的代碼。

4、激活 service worker

在你的 service worker 注冊(cè)之后，瀏覽器會(huì)嘗試為你的頁(yè)面或站點(diǎn)安裝并激活它。

install 事件會(huì)在安裝完成之后觸發(fā)。install 事件一般是被用來(lái)填充你的瀏覽器的離線緩存能力。你需要為 install 事件定義一個(gè) callback ，并決定哪些文件你想要緩存.

// The files we want to cachevar CACHE_NAME = 'my-site-cache-v1';var urlsToCache = [  '/',  '/css/main.css',  '/js/main.js'];self.addEventListener('install', function(event) {  // Perform install steps  event.waitUntil(    caches.open(CACHE_NAME)      .then(function(cache) {        console.log('Opened cache');        return cache.addAll(urlsToCache);      })  );});

在我們的 install callback 中，我們需要執(zhí)行以下步驟：

開(kāi)啟一個(gè)緩存
緩存我們的文件
決定是否所有的資源是否要被緩存

上面的代碼中，我們通過(guò) caches.open 打開(kāi)我們指定的 cache 文件名，然后我們調(diào)用 cache.addAll并傳入我們的文件數(shù)組。這是通過(guò)一連串 promise （caches.open 和 cache.addAll）完成的。event.waitUntil 拿到一個(gè) promise 并使用它來(lái)獲得安裝耗費(fèi)的時(shí)間以及是否安裝成功。

5、監(jiān)聽(tīng) service worker

現(xiàn)在我們已經(jīng)將你的站點(diǎn)資源緩存了，你需要告訴 service worker 讓它用這些緩存內(nèi)容來(lái)做點(diǎn)什么。有了 fetch 事件，這是很容易做到的。

每次任何被 service worker 控制的資源被請(qǐng)求到時(shí)，都會(huì)觸發(fā) fetch 事件，我們可以給 service worker 添加一個(gè) fetch 的事件監(jiān)聽(tīng)器，接著調(diào)用 event 上的 respondWith() 方法來(lái)劫持我們的 HTTP 響應(yīng)，然后你就可以用自己的方法來(lái)更新他們。

self.addEventListener('fetch', function(event) {  event.respondWith(    caches.match(event.request);  );});

caches.match(event.request) 允許我們對(duì)網(wǎng)絡(luò)請(qǐng)求的資源和 cache 里可獲取的資源進(jìn)行匹配，查看是否緩存中有相應(yīng)的資源。這個(gè)匹配通過(guò) url 和 vary header 進(jìn)行，就像正常的 HTTP 請(qǐng)求一樣。

那么，我們?nèi)绾畏祷?nbsp;request 呢，下面就是一個(gè)例子：

self.addEventListener('fetch', function(event) {  event.respondWith(    caches.match(event.request)      .then(function(response) {        // Cache hit - return response        if (response) {          return response;        }        return fetch(event.request);      }    )  );});

上面的代碼里我們定義了 fetch 事件，在 event.respondWith 里，我們傳入了一個(gè)由 caches.match產(chǎn)生的 promise.caches.match 查找 request 中被 service worker 緩存命中的 response 。

如果我們有一個(gè)命中的 response ，我們返回被緩存的值，否則我們返回一個(gè)實(shí)時(shí)從網(wǎng)絡(luò)請(qǐng)求 fetch 的結(jié)果。

6、sw-toolbox

當(dāng)然，我也可以使用第三方庫(kù)，例如：lishaoy.net 使用了 sw-toolbox。

sw-toolbox 使用非常簡(jiǎn)單，下面就是 lishaoy.net 的一個(gè)例子：

  "serviceWorker" in navigator ? navigator.serviceWorker.register('/sw.js').then(function () {    navigator.serviceWorker.controller ? console.log("Assets cached by the controlling service worker.") : console.log("Please reload this page to allow the service worker to handle network operations.")  }).catch(function (e) {    console.log("ERROR: " + e)  }) : console.log("Service workers are not supported in the current browser.")

以上是 注冊(cè) 一個(gè) service woker。

"use strict";(function () {    var cacheVersion = "20180527";    var staticImageCacheName = "image" + cacheVersion;    var staticAssetsCacheName = "assets" + cacheVersion;    var contentCacheName = "content" + cacheVersion;    var vendorCacheName = "vendor" + cacheVersion;    var maxEntries = 100;    self.importScripts("/lib/sw-toolbox/sw-toolbox.js");    self.toolbox.options.debug = false;    self.toolbox.options.networkTimeoutSeconds = 3;    self.toolbox.router.get("/images/(.*)", self.toolbox.cacheFirst, {        cache: {            name: staticImageCacheName,            maxEntries: maxEntries        }    });    self.toolbox.router.get('/js/(.*)', self.toolbox.cacheFirst, {        cache: {            name: staticAssetsCacheName,            maxEntries: maxEntries        }    });    self.toolbox.router.get('/css/(.*)', self.toolbox.cacheFirst, {        cache: {            name: staticAssetsCacheName,            maxEntries: maxEntries        }    ......    self.addEventListener("install", function (event) {        return event.waitUntil(self.skipWaiting())    });    self.addEventListener("activate", function (event) {        return event.waitUntil(self.clients.claim())    })})();

就這樣搞定了 (具體的用法可以去 https://googlechromelabs.github.io/sw-toolbox/api.html#main 查看)。

有的同學(xué)就問(wèn)， service worker 這么好用，這個(gè)緩存空間到底是多大？其實(shí)，在Chrome可以看到，如圖：