來自：w3cplus

　　鏈接：www.w3cplus.com/performance/performance-tools.html（點(diǎn)擊尾部閱讀原文前往）

　　原文：https://css-tricks.com/performance-tools/

　　譯者：南北（在校學(xué)生，本科計(jì)算機(jī)專業(yè)?？駸岬叵氘?dāng)一名作家，為色彩和圖形營(yíng)造的視覺張力折服，喜歡調(diào)教各類JS庫，鐘愛CSS，希望未來加入一個(gè)社交性質(zhì)的公司，內(nèi)心極度肯定“情感”在社交中的決定性地位，立志于此改變社交關(guān)系的快速迭代。）

　　得益于大量的 Grunt 和 Gulp 插件，我們可以輕松實(shí)現(xiàn)網(wǎng)站數(shù)據(jù)的可視化，雖然深入理解這些工具還比較困難，但分門別類的將它們列出來，也是很有幫助的。

　　內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）

　　CDN 可以幫你把網(wǎng)站的資源分發(fā)到世界各地，有助于提高網(wǎng)站的響應(yīng)速度，當(dāng)然，這對(duì)于那些特殊地區(qū)的用戶是收效甚微的。

　　CloudFlare

　　CloudFlare 的強(qiáng)大之處在于它可以成為你的 DNS 服務(wù)器（CDN 只是它所有服務(wù)的一個(gè)組成部分），這樣對(duì)你的網(wǎng)站發(fā)起的所有請(qǐng)求都會(huì)經(jīng)過它。

　　CloudFlare 的 CDN 在過去十五年的設(shè)計(jì)和發(fā)展中，并沒有一味的守舊和固步自封。我們的專利技術(shù)中充分利用了最新的技術(shù)進(jìn)步，包括并不限于硬件、web 服務(wù)器和網(wǎng)絡(luò)路由。換言之，我們創(chuàng)新的建設(shè)了下一代的 CDN。新的 CDN 配置簡(jiǎn)單、價(jià)格低廉，其性能也一定比你使用過的任何傳統(tǒng) CDN 都要優(yōu)秀。

　　MaxCDN

　　CSS-Tricks 當(dāng)前就在使用 MaxCDN 托管所有的靜態(tài)資源。它可以無縫地融合 WordPres 和 W3 的所有緩存資源，所以我們無需做什么特別處理，即可將資源移入 CDN，并能保證鏈接的準(zhǔn)確性。

　　對(duì)于一個(gè)博客來說，考慮到其中的大文件主要是 Java、CSS 和圖片，而不是視頻等類型，這貸款占用的可真多。

　　我們的 CDN 服務(wù)同樣是一個(gè)網(wǎng)站加速器和實(shí)時(shí)控制中心。創(chuàng)建它，就是為了讓網(wǎng)站的用戶和運(yùn)維都能從下一代 CDN 中獲得最大收益。

　　CloudFront

　　亞馬遜網(wǎng)絡(luò)服務(wù)（AWS）版本的 CDN。

　　亞馬遜 CloudFront 是一個(gè)內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)。它可以無縫融合入其他的亞馬遜網(wǎng)絡(luò)服務(wù)產(chǎn)品，為開發(fā)者和企業(yè)分發(fā)內(nèi)容到最終用戶手中提供了一種簡(jiǎn)單的方式，整個(gè)過程都具有低延遲、高轉(zhuǎn)換速度的特點(diǎn)，也沒有最小使用量的強(qiáng)制要求。

　　CDNperf

　　上述的 CDNs 并不能托管你任意的資源，它們往往只是托管最頻繁用到的文件。雖然對(duì)于線上產(chǎn)品來說將資源和服務(wù)器托管到私有的 CDN 上并不是最好的方式，但這種方式對(duì)于分發(fā)資源來說仍然是快速和簡(jiǎn)單的。

　　CDNperf 可以幫你找出最快和最可信賴的 Java CDNS，讓你的網(wǎng)站更快更有朝氣。

　　性能測(cè)試

　　下面的這些性能測(cè)試工具，使用了量化的方式測(cè)試了網(wǎng)站中諸如首字節(jié)加載時(shí)間（time to first byte）或者渲染時(shí)間等表現(xiàn)。有些工具還會(huì)檢查特別檢查資源是否被緩存，多個(gè) CSS 或 JS 文件是否值得合并。

　　WebPagetest

　　WebPagetest 是性能測(cè)試的黃金標(biāo)準(zhǔn)，它提供了多方面的量化指標(biāo)用于性能測(cè)試，比如有一個(gè)基本的評(píng)分，用于評(píng)價(jià)當(dāng)前頁面優(yōu)化的水平；有一個(gè)截圖，顯示頁面加載后的視覺效果；還有一個(gè)瀏覽器加載資源的瀑布流…

　　根據(jù)用戶瀏覽器真實(shí)的連接速度，在全球范圍內(nèi)進(jìn)行網(wǎng)頁速度測(cè)試，并提供詳細(xì)的優(yōu)化建議。

　　通過使用 API wrapper，也可以將 WebPagetest 的相關(guān)服務(wù)添加到 NPM 模塊和命令行工具中。

　　webpagetest-mapper：將 WebPageTest 的測(cè)試數(shù)據(jù)轉(zhuǎn)換為可讀的文檔格式。

　　WPT Bulk Tester：使用 Google Docs 測(cè)試多個(gè) URLs（如果你擁有 API key，也可以使用 webpagetest.org 來做這件事，或者其他公開可訪問的實(shí)例）。

　　Yslow

　　Yslow 基于 Yahoo 的高性能網(wǎng)頁教條，分析網(wǎng)頁的性能并給出響應(yīng)緩慢的原因。

　　Google PageSpeed

　　PageSpeed 根據(jù)網(wǎng)頁最佳實(shí)踐分析和優(yōu)化測(cè)試的網(wǎng)頁。

　　PageSpeed 也有一個(gè) CLI（Command Line Interface）工具：PSI(PageSpeed Insights with reporting)

　　在構(gòu)建進(jìn)程中，可以使用 PSI 測(cè)試移動(dòng)端和桌面端的性能，最終得到可讀性良好的測(cè)試結(jié)果。

　　我的網(wǎng)站都開銷到哪里去了？

　　評(píng)估網(wǎng)站在世界各地為每個(gè)移動(dòng)端用戶支出的維護(hù)成本。

　　Pingdom 網(wǎng)站速度測(cè)試

　　輸入 URL 地址，即可測(cè)試頁面加載速度，分析并找出性能瓶頸。

　　SpeedCurve

　　SpeedCurve 既可以讓你追蹤競(jìng)爭(zhēng)對(duì)手的性能表現(xiàn)，也可以追蹤自己的性能表現(xiàn)。使用 SpeedCurve 時(shí)，你可以查看某個(gè)因素在不同站點(diǎn)的速度表現(xiàn)。對(duì)于移動(dòng)用戶來說，他們希望網(wǎng)站在手機(jī)上加載起來要快于電腦，如果感到加載遲緩，往往會(huì)迅速關(guān)上網(wǎng)頁，所以，網(wǎng)站的響應(yīng)速度對(duì)他們很重要。

　　Calibre

　　Calibre 可以幫你追蹤頁面的加載時(shí)間，以及頁面大小。問題頁面（Janky page）？是的，Calibre 會(huì)直接告訴你哪些頁面有問題。

　　GT Metrix

　　GT Metrix 結(jié)合了 Google PageSpeed 和 YSlow，幫助開發(fā)者創(chuàng)建快速、高效和全面優(yōu)化的網(wǎng)頁瀏覽體驗(yàn)。

　　perf.js

　　在開發(fā)過程中，將性能的時(shí)序情況顯示在頁面上。

　　perf bar

　　一種簡(jiǎn)單的方式，用于快速收集和查看網(wǎng)頁性能，提供預(yù)置的量化標(biāo)準(zhǔn)，也支持自定義的量化標(biāo)準(zhǔn)。

　　grunt-perfbudget

　　用于評(píng)估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或私有實(shí)例在特定的 URL 進(jìn)行測(cè)試。它會(huì)將測(cè)試結(jié)果和你預(yù)期的性能期望做比較，如果小于預(yù)期，那么這個(gè) task 就順利完成了，如果超過了你預(yù)期的性能期望，那么就會(huì)報(bào)告失敗，并且會(huì)幫助你分析超出預(yù)期的原因。

　　Sitespeed

　　Sitespeed.io 是一個(gè)基于最佳實(shí)踐以及一些加載時(shí)序等量化標(biāo)準(zhǔn)的開源工具，有助于開發(fā)者分析網(wǎng)頁的加載速度和渲染性能。它會(huì)從開發(fā)者的站點(diǎn)收集多個(gè)頁面的數(shù)據(jù)，根據(jù)最佳實(shí)踐等規(guī)則來分析這些網(wǎng)頁，并將結(jié)果以 HTML 的形式輸出，或者以數(shù)值的形式發(fā)送到 Graphite。

　　speedgun

　　該網(wǎng)站允許你使用 Speedgun.js 收集任意公開站點(diǎn)的性能數(shù)據(jù)。它會(huì)運(yùn)行五次，并顯示一個(gè)友好的示圖，幫助開發(fā)者了解當(dāng)前頁面的加載過程。

　　gulp size

　　顯示項(xiàng)目大小。

　　瀏覽器工具盒插件

　　Chrome 開發(fā)者工具

　　在 Chrome 的開發(fā)者工具中，對(duì)于評(píng)估性能有兩個(gè)非常有用的標(biāo)簽：Audits 和 Network。

　　Audit 面板用于分析加載的頁面。它可以提供優(yōu)化建議，減少頁面加載時(shí)間，加快頁面的響應(yīng)速度。

　　Network 面板以動(dòng)態(tài)的方式實(shí)時(shí)地展示了資源的請(qǐng)求和下載。雖然辨析和定位這些請(qǐng)求會(huì)比純粹的加載頁面多花一些時(shí)間，但這些消耗對(duì)于指導(dǎo)頁面的性能優(yōu)化是非常重要的。

　　火狐開發(fā)者瀏覽器

　　該瀏覽器是為開發(fā)者而創(chuàng)造的，專注于服務(wù)開發(fā)者的工作流。這是有史以來第一次，將構(gòu)建、測(cè)試和擴(kuò)展等服務(wù)集中于一體。

　　更多信息請(qǐng)查看 MDN 上的 Network Monitor。

　　Page performance

　　這個(gè)擴(kuò)展插件應(yīng)用于 Chrome 瀏覽器，可以開速分析當(dāng)前頁面的性能。如果瀏覽器打開了多個(gè)標(biāo)簽，那么該插件會(huì)自動(dòng)分析當(dāng)前頁面的性能表現(xiàn)。

　　審查

　　PerfAudit

　　我們審查頁面的加載和渲染性能。對(duì)于令人反感的響應(yīng)緩慢和問題頁面，我們有義不容辭的使命提供快速、穩(wěn)定和準(zhǔn)確的頁面。

　　Perfmonkey

　　PerfMonkey 讓追蹤頁面的渲染性能變得無比簡(jiǎn)單。

　　SVG 和圖片

　　ImageOptim

　　ImageOptim 是一個(gè)免費(fèi)的應(yīng)用，它在減少圖片體積、提高加載速度的同時(shí)，還不會(huì)犧牲圖片質(zhì)量。它優(yōu)化了壓縮參數(shù)、移除了無用的頭信息和非必要的顏色配置信息。

　　它也可以被集成到 Grunt 和 Gulp 中。

　　SVGO

　　SVG Optimizer 是一個(gè)基于 Nodejs 的 SVG 矢量圖形優(yōu)化工具。

　　如果你需要的是交互界面的操作，而不是 CLI，那么可以下載這個(gè) APP。

　　SVGOMG

　　SVGOMG 是 SVGO’s Missing GUI 的縮寫，旨在揭露 SVG 文件的主要問題，而不具有 SVGO 的完整可配置項(xiàng)。

　　手動(dòng)優(yōu)化 SVGs

　　類似于其他的圖形文件，SVG 也應(yīng)該在上線前被優(yōu)化。雖然有許多類似 Raymond 的工具可以幫你做這種優(yōu)化，但最好的方式還是深入理解其細(xì)節(jié)并做一些手動(dòng)的優(yōu)化。

　　Triamge

　　Triamge 是一個(gè)擴(kuò)平臺(tái)的 GUI 和 CLI 工具，用于優(yōu)化網(wǎng)站的圖片文件。它組合使用 optipng、pngcrush、advpng 和 jpegoptim，并根據(jù)文件類型做優(yōu)化（最新版本中，已經(jīng)支持 PNG 和 JPG）。

　　CSS

　　CSS Triggers

　　該網(wǎng)站用于展示哪些 CSS 屬性可以影響瀏覽器的布局、渲染和其他組合操作。

　　更多有關(guān) CSS-triggers 的消息，可以點(diǎn)擊這里查看。

　　CSS Stats

　　該網(wǎng)頁應(yīng)用以可視化的形式展示了開發(fā)者項(xiàng)目中有關(guān) CSS 的統(tǒng)計(jì)信息。

　　CSS Shrink

　　CSS 壓縮工具。由于 CSS 是頁面渲染的核心文件，所以必須保持輕巧，便于快速響應(yīng)和渲染。

　　uncss

　　UnCSS 是一個(gè)用于移除腳本中無用 CSS 的工具。它可以審查多個(gè)文件，也可以審查由 Java 注入的 CSS。

　　它也可以被集成到 Grunt 和 Gulp 中。

　　Critical path

　　提取和整合 HTML 中關(guān)鍵的 CSS。

　　HTML

　　HTMLMinifier

　　HTMLMinifier 是一個(gè)高度可配置、經(jīng)過完善的測(cè)試、基于 Java 的 HTML 壓縮工具，并且內(nèi)置了代碼審查類的工具。

　　gulp-htmlmin

　　用于壓縮 HTML 的 gulp 插件。

　　grunt-contrib-htmlmin

　　用于壓縮 HTML 的 grunt 插件。

　　Java

　　uglifyjs

　　Java 解析器、混淆、壓縮和美化工具集。

　　它也可以被集成到 Grunt 和 Gulp 中。

　　你也許并不需要某些 jQuery 插件

　　jQuery 及其附屬工具都是非常優(yōu)秀的項(xiàng)目，使用它們往往使開發(fā)工作輕松而又快捷。

　　另一方面，如果你正在開發(fā)一個(gè)庫，那么你需要思考一下是否真的需要依賴于 jQuery。也許你只需要引入幾行代碼，就可以放棄引入一個(gè)庫實(shí)現(xiàn)某些功能。如果你的庫只是針對(duì)于高級(jí)瀏覽器，那么可能直接調(diào)用瀏覽器的內(nèi)置函數(shù)就可以實(shí)現(xiàn)相關(guān)功能了。

　　擴(kuò)展閱讀

Usertiming API

Jank Free

Scrolling performance

Mobile web performance auditing

Gone in 60 frames per second

Udacity course on rendering performance

　　●本文編號(hào)312，以后想閱讀這篇文章直接輸入312即可。

　　●輸入m可以獲取到文章目錄

　　相關(guān)推薦↓↓↓

Web開發(fā)

推薦：《15個(gè)技術(shù)類公眾微信》

　　涵蓋：程序人生、算法與數(shù)據(jù)結(jié)構(gòu)、黑客技術(shù)與網(wǎng)絡(luò)安全、大數(shù)據(jù)技術(shù)、前端開發(fā)、Java、Python、Web開發(fā)、安卓開發(fā)、iOS開發(fā)、C/C++、.NET、Linux、數(shù)據(jù)庫、運(yùn)維等。