值得收藏！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。

也许你只须要引入几行代码，就能够放弃引入一个库实现某些功能。若是你的库只是针对于高级浏览器，

那么可能直接调用浏览器的内置函数就能够实现相关功能了。