來自：w3cplus

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

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

　　譯者：南北（在校學生，本科計算機專業。狂熱地想當一名作家，為色彩和圖形營造的視覺張力折服，喜歡調教各類JS庫，鐘愛CSS，希望未來加入一個社交性質的公司，內心極度肯定“情感”在社交中的決定性地位，立志于此改變社交關系的快速迭代。）

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

　　內容分發網絡（CDN）

　　CDN 可以幫你把網站的資源分發到世界各地，有助于提高網站的響應速度，當然，這對于那些特殊地區的用戶是收效甚微的。

　　CloudFlare

　　CloudFlare 的強大之處在于它可以成為你的 DNS 服務器（CDN 只是它所有服務的一個組成部分），這樣對你的網站發起的所有請求都會經過它。

　　CloudFlare 的 CDN 在過去十五年的設計和發展中，并沒有一味的守舊和固步自封。我們的專利技術中充分利用了最新的技術進步，包括并不限于硬件、web 服務器和網絡路由。換言之，我們創新的建設了下一代的 CDN。新的 CDN 配置簡單、價格低廉，其性能也一定比你使用過的任何傳統 CDN 都要優秀。

　　MaxCDN

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

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

　　我們的 CDN 服務同樣是一個網站加速器和實時控制中心。創建它，就是為了讓網站的用戶和運維都能從下一代 CDN 中獲得最大收益。

　　CloudFront

　　亞馬遜網絡服務（AWS）版本的 CDN。

　　亞馬遜 CloudFront 是一個內容分發網絡服務。它可以無縫融合入其他的亞馬遜網絡服務產品，為開發者和企業分發內容到最終用戶手中提供了一種簡單的方式，整個過程都具有低延遲、高轉換速度的特點，也沒有最小使用量的強制要求。

　　CDNperf

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

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

　　性能測試

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

　　WebPagetest

　　WebPagetest 是性能測試的黃金標準，它提供了多方面的量化指標用于性能測試，比如有一個基本的評分，用于評價當前頁面優化的水平；有一個截圖，顯示頁面加載后的視覺效果；還有一個瀏覽器加載資源的瀑布流…

　　根據用戶瀏覽器真實的連接速度，在全球范圍內進行網頁速度測試，并提供詳細的優化建議。

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

　　webpagetest-mapper：將 WebPageTest 的測試數據轉換為可讀的文檔格式。

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

　　Yslow

　　Yslow 基于 Yahoo 的高性能網頁教條，分析網頁的性能并給出響應緩慢的原因。

　　Google PageSpeed

　　PageSpeed 根據網頁最佳實踐分析和優化測試的網頁。

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

　　在構建進程中，可以使用 PSI 測試移動端和桌面端的性能，最終得到可讀性良好的測試結果。

　　我的網站都開銷到哪里去了？

　　評估網站在世界各地為每個移動端用戶支出的維護成本。

　　Pingdom 網站速度測試

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

　　SpeedCurve

　　SpeedCurve 既可以讓你追蹤競爭對手的性能表現，也可以追蹤自己的性能表現。使用 SpeedCurve 時，你可以查看某個因素在不同站點的速度表現。對于移動用戶來說，他們希望網站在手機上加載起來要快于電腦，如果感到加載遲緩，往往會迅速關上網頁，所以，網站的響應速度對他們很重要。

　　Calibre

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

　　GT Metrix

　　GT Metrix 結合了 Google PageSpeed 和 YSlow，幫助開發者創建快速、高效和全面優化的網頁瀏覽體驗。

　　perf.js

　　在開發過程中，將性能的時序情況顯示在頁面上。

　　perf bar

　　一種簡單的方式，用于快速收集和查看網頁性能，提供預置的量化標準，也支持自定義的量化標準。

　　grunt-perfbudget

　　用于評估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或私有實例在特定的 URL 進行測試。它會將測試結果和你預期的性能期望做比較，如果小于預期，那么這個 task 就順利完成了，如果超過了你預期的性能期望，那么就會報告失敗，并且會幫助你分析超出預期的原因。

　　Sitespeed

　　Sitespeed.io 是一個基于最佳實踐以及一些加載時序等量化標準的開源工具，有助于開發者分析網頁的加載速度和渲染性能。它會從開發者的站點收集多個頁面的數據，根據最佳實踐等規則來分析這些網頁，并將結果以 HTML 的形式輸出，或者以數值的形式發送到 Graphite。

　　speedgun

　　該網站允許你使用 Speedgun.js 收集任意公開站點的性能數據。它會運行五次，并顯示一個友好的示圖，幫助開發者了解當前頁面的加載過程。

　　gulp size

　　顯示項目大小。

　　瀏覽器工具盒插件

　　Chrome 開發者工具

　　在 Chrome 的開發者工具中，對于評估性能有兩個非常有用的標簽：Audits 和 Network。

　　Audit 面板用于分析加載的頁面。它可以提供優化建議，減少頁面加載時間，加快頁面的響應速度。

　　Network 面板以動態的方式實時地展示了資源的請求和下載。雖然辨析和定位這些請求會比純粹的加載頁面多花一些時間，但這些消耗對于指導頁面的性能優化是非常重要的。

　　火狐開發者瀏覽器

　　該瀏覽器是為開發者而創造的，專注于服務開發者的工作流。這是有史以來第一次，將構建、測試和擴展等服務集中于一體。

　　更多信息請查看 MDN 上的 Network Monitor。

　　Page performance

　　這個擴展插件應用于 Chrome 瀏覽器，可以開速分析當前頁面的性能。如果瀏覽器打開了多個標簽，那么該插件會自動分析當前頁面的性能表現。

　　審查

　　PerfAudit

　　我們審查頁面的加載和渲染性能。對于令人反感的響應緩慢和問題頁面，我們有義不容辭的使命提供快速、穩定和準確的頁面。

　　Perfmonkey

　　PerfMonkey 讓追蹤頁面的渲染性能變得無比簡單。

　　SVG 和圖片

　　ImageOptim

　　ImageOptim 是一個免費的應用，它在減少圖片體積、提高加載速度的同時，還不會犧牲圖片質量。它優化了壓縮參數、移除了無用的頭信息和非必要的顏色配置信息。

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

　　SVGO

　　SVG Optimizer 是一個基于 Nodejs 的 SVG 矢量圖形優化工具。

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

　　SVGOMG

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

　　手動優化 SVGs

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

　　Triamge

　　Triamge 是一個擴平臺的 GUI 和 CLI 工具，用于優化網站的圖片文件。它組合使用 optipng、pngcrush、advpng 和 jpegoptim，并根據文件類型做優化（最新版本中，已經支持 PNG 和 JPG）。

　　CSS

　　CSS Triggers

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

　　更多有關 CSS-triggers 的消息，可以點擊這里查看。

　　CSS Stats

　　該網頁應用以可視化的形式展示了開發者項目中有關 CSS 的統計信息。

　　CSS Shrink

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

　　uncss

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

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

　　Critical path

　　提取和整合 HTML 中關鍵的 CSS。

　　HTML

　　HTMLMinifier

　　HTMLMinifier 是一個高度可配置、經過完善的測試、基于 Java 的 HTML 壓縮工具，并且內置了代碼審查類的工具。

　　gulp-htmlmin

　　用于壓縮 HTML 的 gulp 插件。

　　grunt-contrib-htmlmin

　　用于壓縮 HTML 的 grunt 插件。

　　Java

　　uglifyjs

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

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

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

　　jQuery 及其附屬工具都是非常優秀的項目，使用它們往往使開發工作輕松而又快捷。

　　另一方面，如果你正在開發一個庫，那么你需要思考一下是否真的需要依賴于 jQuery。也許你只需要引入幾行代碼，就可以放棄引入一個庫實現某些功能。如果你的庫只是針對于高級瀏覽器，那么可能直接調用瀏覽器的內置函數就可以實現相關功能了。

　　擴展閱讀

Usertiming API

Jank Free

Scrolling performance

Mobile web performance auditing

Gone in 60 frames per second

Udacity course on rendering performance

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

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

　　相關推薦↓↓↓

Web開發

推薦：《15個技術類公眾微信》

　　涵蓋：程序人生、算法與數據結構、黑客技術與網絡安全、大數據技術、前端開發、Java、Python、Web開發、安卓開發、iOS開發、C/C++、.NET、Linux、數據庫、運維等。