值得收藏！Web開發的各類性能工具

  嗨，各位，又到了週末總結時間！得益於大量的 Grunt 和 Gulp 插件，

咱們能夠輕鬆實現網站數據的可視化，雖然深刻理解這些工具還比較困難，但分門別類的將它們列出來，也是頗有幫助的。

內容分發網絡（CDN）

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

CloudFlare (https://www.cloudflare.com/)

   CloudFlare 的強大之處在於它能夠成爲你的 DNS 服務器（CDN 只是它全部服務的一個組成部分），這樣對你的網站發起的全部請求都會通過它。

   CloudFlare 的 CDN 在過去十五年的設計和發展中，並無一味的守舊和固步自封。咱們的專利技術中充分利用了最新的技術進步，

包括並不限於硬件、web 服務器和網絡路由。換言之，咱們創新的建設了下一代的 CDN。新的 CDN 配置簡單、價格低廉，

   其性能也必定比你使用過的任何傳統 CDN 都要優秀。

MaxCDN(http://tracking.maxcdn.com/c/13088/3982/378)

CSS-Tricks 當前就在使用 MaxCDN 託管全部的靜態資源。它能夠無縫地融合 WordPres 和 W3 的全部緩存資源，

因此咱們無需作什麼特別處理，便可將資源移入 CDN，並能保證連接的準確性。

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

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

CloudFront（http://aws.amazon.com/cloudfront/）

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

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

CDNperf（http://www.cdnperf.com/）

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

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

---

性能測試

  下面的這些性能測試工具，使用了量化的方式測試了網站中諸如首字節加載時間（time to first byte）或者渲染時間等表現。

有些工具還會檢查特別檢查資源是否被緩存，多個 CSS 或 JS 文件是否值得合併。

WebPagetest(http://www.webpagetest.org/)

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

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

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

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

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

Yslow（http://yslow.org/）

  Yslow 基於 Yahoo 的高性能網頁教條，分析網頁的性能並給出響應緩慢的緣由。

Google PageSpeed（https://developers.google.com/speed/pagespeed/insights/）

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

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

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

個人網站都開銷到哪裏去了？（http://whatdoesmysitecost.com/）

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

Pingdom 網站速度測試（http://tools.pingdom.com/fpt/）

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

SpeedCurve（https://speedcurve.com/）

   SpeedCurve 既可讓你追蹤競爭對手的性能表現，也能夠追蹤本身的性能表現。使用 SpeedCurve 時，你能夠查看某個因素在不一樣站點的速度表現。對於移動用戶來講，他們但願網站在手機上加載起來要快於電腦，

若是感到加載遲緩，每每會迅速關上網頁，因此，網站的響應速度對他們很重要。

Calibre（https://calibreapp.com/）

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

GT Metrix（http://gtmetrix.com/）

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

perf.js（https://gist.github.com/tkadlec/7e352b74b1961a3e36d7）

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

perf bar（http://lafikl.github.io/perfBar/）

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

grunt-perfbudget（https://github.com/tkadlec/grunt-perfbudget/）

  用於評估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或私有實例在特定的 URL 進行測試。它會將測試結果和你預期的性能指望作比較，若是小於預期，那麼這個 task 就順利完成了，若是超過了你預期的性能指望，那麼就會報告失敗，而且會幫助你分析超出預期的緣由。

Sitespeed（http://www.sitespeed.io/）

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

speedgun（http://speedgun.io/）

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

gulp size（https://github.com/sindresorhus/gulp-size）

顯示項目大小。

---

瀏覽器工具盒插件

Chrome 開發者工具

在 Chrome 的開發者工具中，對於評估性能有兩個很是有用的標籤：Audits 和 Network。

Audit 面板用於分析加載的頁面。它能夠提供優化建議，減小頁面加載時間，加快頁面的響應速度。

   Network 面板以動態的方式實時地展現了資源的請求和下載。雖然辨析和定位這些請求會比純粹的加載頁面多花一些時間，

  但這些消耗對於指導頁面的性能優化是很是重要的。

火狐開發者瀏覽器

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

  更多信息請查看 MDN 上的 Network Monitor（https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor）。

Page performance（https://chrome.google.com/webstore/detail/page-performance/gembkfinllgmbkgbgdoaeopbahikjomp）

   這個擴展插件應用於 Chrome 瀏覽器，能夠開速分析當前頁面的性能。若是瀏覽器打開了多個標籤，那麼該插件會自動分析當前頁面的性能表現。

---

審查

PerfAudit（http://perfaudit.com/）

咱們審查頁面的加載和渲染性能。對於使人反感的響應緩慢和問題頁面，咱們有責無旁貸的使命提供快速、穩定和準確的頁面。

Perfmonkey（http://www.perfmonkey.com/#/home）

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

SVG 和圖片

ImageOptim（http://www.perfmonkey.com/#/home）

  ImageOptim 是一個免費的應用，它在減小圖片體積、提升加載速度的同時，還不會犧牲圖片質量。它優化了壓縮參數、

移除了無用的頭信息和非必要的顏色配置信息。

它也能夠被集成到 Grunt 和 Gulp 中。

SVGO（https://github.com/svg/svgo）

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

若是你須要的是交互界面的操做，而不是 CLI，那麼能夠下載這個 APP。

SVGOMG（https://github.com/jakearchibald/svgomg）

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

手動優化 SVGs（https://css-tricks.com/understanding-and-manually-improving-svg-optimization/）

相似於其餘的圖形文件，SVG 也應該在上線前被優化。雖然有許多相似 Raymond 的工具能夠幫你作這種優化，

但最好的方式仍是深刻理解其細節並作一些手動的優化。

Triamge（http://trp_w_picpath.org/）

Triamge 是一個擴平臺的 GUI 和 CLI 工具，用於優化網站的圖片文件。它組合使用 optipng、pngcrush、ad***g 和 jpegoptim，

並根據文件類型作優化（最新版本中，已經支持 PNG 和 JPG）。

---

CSS

CSS Triggers（http://csstriggers.com/）

該網站用於展現哪些 CSS 屬性能夠影響瀏覽器的佈局、渲染和其餘組合操做。

更多有關 CSS-triggers 的消息，能夠點擊這裏查看（https://aerotwist.com/blog/css-triggers/）。

CSS Stats（http://cssstats.com/）

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

CSS Shrink（http://cssshrink.com/）

CSS 壓縮工具。因爲 CSS 是頁面渲染的核心文件，因此必須保持輕巧，便於快速響應和渲染。

uncss（https://github.com/giakki/uncss）

UnCSS 是一個用於移除腳本中無用 CSS 的工具。它能夠審查多個文件，也能夠審查由 JavaScript 注入的 CSS。

它也能夠被集成到 Grunt 和 Gulp 中。

Critical path（https://github.com/addyosmani/critical）

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

HTML

HTMLMinifier（https://www.npmjs.com/package/html-minifier）

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

gulp-htmlmin（https://www.npmjs.com/package/gulp-htmlmin）

用於壓縮 HTML 的 gulp 插件。

grunt-contrib-htmlmin（https://www.npmjs.com/package/grunt-contrib-htmlmin）

用於壓縮 HTML 的 grunt 插件。

---

JavaScript

uglifyjs（https://www.npmjs.com/package/uglify-js）

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

它也能夠被集成到 Grunt 和 Gulp 中。

你也許並不須要某些 jQuery 插件（http://youmightnotneedjqueryplugins.com/）

jQuery 及其附屬工具都是很是優秀的項目，使用它們每每使開發工做輕鬆而又快捷。

另外一方面，若是你正在開發一個庫，那麼你須要思考一下是否真的須要依賴於 jQuery。

也許你只須要引入幾行代碼，就能夠放棄引入一個庫實現某些功能。若是你的庫只是針對於高級瀏覽器，

那麼可能直接調用瀏覽器的內置函數就能夠實現相關功能了。