“工欲善其事，必先利其器”，在「網(wǎng)站優(yōu)化實(shí)戰(zhàn)」中我們提到了一些優(yōu)化的相關(guān)經(jīng)驗(yàn)，并沒(méi)有對(duì)優(yōu)化工具展開(kāi)討論，這節(jié)就讓我們一起上手實(shí)踐吧！

一、概要

關(guān)于優(yōu)化工具，我們主要從兩方面說(shuō)起：「性能評(píng)估工具」和「優(yōu)化工具」。

1.性能評(píng)估工具

LighthousePageSpeedYSlow

2.優(yōu)化工具我們主要依賴(lài)「Chrome DevTools」，大致如下：

NetworkPerformanceShow Third Party BadgesBlock Request URLCoverageDOMRenderingLayer二、Lighthouse

1.Lighthouse 安裝

Chrome Setting - 更多工具 - 擴(kuò)展程序 - 打開(kāi) Chrome 網(wǎng)上應(yīng)用店 - Lighthouse

2.插件 - 生成報(bào)告

報(bào)告是我們的一個(gè)重要參考指標(biāo)，這是網(wǎng)站評(píng)估的通用方法。當(dāng)然，網(wǎng)站也會(huì)有不同的類(lèi)別，關(guān)注指標(biāo)也不盡相同，后續(xù)我們會(huì)繼續(xù)探討「如何制定合理的網(wǎng)站優(yōu)化性能指標(biāo)」。

3.優(yōu)化建議

Lighthouse 比較人性化的點(diǎn)在于他既提出了問(wèn)題，同時(shí)也提出了解決建議。

三、PageSpeed

1.使用 PageSpeed

我們可以在「Chrome DevTools」菜單欄中找到并打開(kāi)：

2.分析報(bào)告

四、Chrome DevTools - Network

1.關(guān)于 Network 我們重點(diǎn)關(guān)注標(biāo)注的 3 處

2.Timing 也是優(yōu)化不可缺少的工具：

補(bǔ)充說(shuō)明一下：

TTFB：等待初始響應(yīng)所用的時(shí)間，也稱(chēng)為第一字節(jié)的時(shí)間，這是我們判斷服務(wù)器以及網(wǎng)絡(luò)狀況的重要指標(biāo)。

此時(shí)間將捕捉到服務(wù)器往返的延遲時(shí)間，以及等待服務(wù)器傳送響應(yīng)所用的時(shí)間。

五、Chrome DevTools - Performance

1.概覽

2.版面主要由 4 部分構(gòu)成

控制面板：錄制，清除，配置記錄期間需要捕獲的信息Overview：頁(yè)面性能的高級(jí)匯總，以及頁(yè)面加載情況火焰圖：CPU 堆疊追蹤的可視化總覽：餅圖記錄各部分耗時(shí)情況

3.Overview 詳解

FPS：每秒幀數(shù)。綠色豎線越高，F(xiàn)PS 越高。 FPS 圖表上的紅色塊表示長(zhǎng)時(shí)間幀，很可能會(huì)出現(xiàn)卡頓。CPU：CPU 資源。此面積圖指示消耗 CPU 資源的事件類(lèi)型。NET：每條彩色橫杠表示一種資源。橫杠越長(zhǎng)，檢索資源所需的時(shí)間越長(zhǎng)。每個(gè)橫杠的淺色部分表示等待時(shí)間（從請(qǐng)求資源到第一個(gè)字節(jié)下載完成的時(shí)間）。深色部分表示傳輸時(shí)間（下載第一個(gè)和最后一個(gè)字節(jié)之間的時(shí)間）。

需要特別注意，Performance 工具中的每一種顏色其實(shí)都有自己的含義。

HTML 文件為藍(lán)色。腳本為黃色。樣式表為紫色。媒體文件為綠色。其他資源為灰色。

小技巧：

使用無(wú)痕模式，減少 Chrome 擴(kuò)展程序會(huì)給應(yīng)用的干擾。

4.火焰圖

Network：這里我們可以看出來(lái)，我們資源加載的一個(gè)順序情況。什么時(shí)間加載了什么資源，通過(guò)這些，我們更直觀的知道資源是否并行加載。Frames：上文提及到的頁(yè)面幀情況。InteractionsTimings 中如下 5 個(gè)指標(biāo)是我們優(yōu)化的方向First PaintDOMContentLoaded EventOnload EventFirst Contentful PaintFirst Meaningful PaintMain：展示了主線程運(yùn)行狀況。X 軸代表著時(shí)間，每個(gè)長(zhǎng)條代表著一個(gè) event。長(zhǎng)條越長(zhǎng)就代表這個(gè) event 花費(fèi)的時(shí)間越長(zhǎng)。Y 軸代表了調(diào)用棧 call stack 。

在棧里，上面的 event 調(diào)用了下面的 event。

注意紅色警告：

JS Heap

JavaScript 運(yùn)行過(guò)程中的大部分?jǐn)?shù)據(jù)都保存在堆 Heap 中，所以 JavaScript 性能分析另一個(gè)比較重要的方面是內(nèi)存，也就是堆的分析。

打開(kāi) Performance 監(jiān)視器

篇幅有限，剩余部分請(qǐng)查看《網(wǎng)站優(yōu)化，這些工具你一定用得著（二）》。

熱門(mén)原創(chuàng)文章推薦

酷炫的 HTML5 網(wǎng)頁(yè) PPT

從優(yōu)秀到卓越 - Web 前端不可錯(cuò)過(guò)的 6 個(gè)網(wǎng)站

在北京你圖啥？