Web 性能優(yōu)化是一個(gè)老生常談的話題，也是前端頁(yè)面開發(fā)十分重要的部分。當(dāng)頁(yè)面加載速度越慢，用戶流失的概率就越大，性能和交互直接影響用戶體驗(yàn)。

下面推薦幾款 Web 性能優(yōu)化輔助工具推薦，希望能對(duì)大家有所幫助。

Lighthouse

Lighthouse 是 Google 開源的一個(gè)自動(dòng)化工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。你可以將其作為一個(gè) Chrome 擴(kuò)展程序運(yùn)行，或從命令行運(yùn)行。 

當(dāng)為 Lighthouse 提供一個(gè)要審查的網(wǎng)址，它將針對(duì)此頁(yè)面運(yùn)行一連串的測(cè)試，然后生成一個(gè)有關(guān)頁(yè)面性能的報(bào)告?？梢詤⒖际〉臏y(cè)試，看看可以采取哪些措施來改進(jìn)應(yīng)用。

Chrom 擴(kuò)展則會(huì)把報(bào)告以非常人性化的圖形界面展示給你。

傳送門：www.oschina.net/p/lighthouse

Speed Racer

SpeedRacer 是一款性能測(cè)試工具，它在 Chrome 中運(yùn)行腳本，并生成詳細(xì)的性能報(bào)告。

SpeedRacer 是直接借助瀏覽器來實(shí)際測(cè)試性能的工具，在實(shí)際工作中，可以與其它模擬用戶訪問流量來評(píng)估性能的工具配合使用。

傳送門：https://github.com/speedracer/speedracer

Yellow Lab Tools

Yellow Lab Tools 是一款 Web 性能及前端質(zhì)量測(cè)試工具。與其他工具不同的是，它有一些在其他工具上無法看到的獨(dú)特功能，例如頁(yè)面加載時(shí) JavaScript 與 DOM 互動(dòng)和其他程序代碼驗(yàn)證問題。

Yellow Lab Tools 偏向于一個(gè)發(fā)現(xiàn)不良實(shí)踐的工具，會(huì)綜合頁(yè)面權(quán)重、請(qǐng)求數(shù)、DOM、錯(cuò)誤的 Javascript、錯(cuò)誤的 CSS 等方面取得一個(gè)評(píng)分。并顯示出在加載頁(yè)面的過程中，DOM 是如何相互影響。

傳送門：https://yellowlab.tools/

Web Tracing Framework

Web Tracing Framework 也是 Google 推出的一組用于跟蹤和調(diào)查復(fù)雜 Web 應(yīng)用的庫(kù)、工具和可視化工具合集。它可以幫助發(fā)現(xiàn)性能問題，跟蹤回歸，并構(gòu)建流暢的 60fps Web 應(yīng)用。能讓你花更少時(shí)間來測(cè)試代碼即可。

傳送門：www.oschina.net/p/tracing-framework

grunt-perfbudget

grunt-perfbudget 是一款用于評(píng)估性能的 Grunt task，它使用 WebPagetest 的公有或私有實(shí)例在特定的 URL 進(jìn)行測(cè)試，并將測(cè)試結(jié)果和你預(yù)期的性能期望做比較。

如果小于預(yù)期，那么這個(gè) task 就順利完成了，如果超過了預(yù)期的性能期望，那么就會(huì)報(bào)告失敗，并幫助你分析超出預(yù)期的原因。

傳送門：https://github.com/tkadlec/grunt-perfbudget

Sitespeed.io

Sitespeed.io 是一組基于***實(shí)踐以及一些加載時(shí)序等量化標(biāo)準(zhǔn)的開源工具，用以幫助開發(fā)者分析網(wǎng)頁(yè)的加載速度和渲染性能。

Sitespeed.io 從開發(fā)者的站點(diǎn)收集多個(gè)頁(yè)面的數(shù)據(jù)，并根據(jù)***實(shí)踐等規(guī)則來分析這些網(wǎng)頁(yè)，然后將結(jié)果以 HTML 的形式輸出，或者以數(shù)值的形式發(fā)送到 Graphite 。

傳送門：https://www-origin.sitespeed.io/