值得珍藏!Web开发之各样性能工具

2015/06/22 · HTML5 ·
性能

原文出处: Robin
Rendle
   译文出处:南北   

喂,各位,又至了周末总时!得益于大量底 Grunt 和 Gulp
插件,大家可轻松实现网站数据的可视化,即便深远掌握这一个家伙还相比较忙碌,但分门别类的拿其排出来,也是杀有扶持的。

情节分发网络(CDN)

CDN
可以帮助您将网站的资源分发及世界各地,有助于增强网站的响应速度,当然,这对这么些特殊地区的用户是收效甚微的。

CloudFlare

CloudFlare 的无敌的远在当叫它可成为您的 DNS 服务器(CDN
只是其拥有服务的一个有的),这样针对性君的网站发起的装有请求都相会经过其。

CloudFlare 的 CDN
在过去十五年之宏图以及提升吃,并不曾始终的寒酸和封建。我们的专利技术中丰盛利用了行的技术提升,包括并无避免硬件、web
服务器和网络路由。换言之,我们革新的建设了后辈的 CDN。新的 CDN
配置简单、价格低廉,其性为毫无疑问比你以了之其它传统 CDN 都如可以。

MaxCDN

CSS-Tricks 时便当使 马克斯CDN 托管所有的静态资源。它可以无缝地融为一体
WordPres 和 W3
的有所缓存资源,所以我们随便需召开啊特别处理,即可将资源移入
CDN,并会确保链接的准头。

澳门新葡亰亚洲在线 1

对于一个博客来说,考虑到内的慌文件着重是 JavaScript、CSS
和图表,而不是视频等门类,这贷款占的但是真正多。

我们的 CDN
服务一样是一个网站加速器和实时控制中央。创立它,就是为吃网站的用户与运维都能自下一代
CDN 中得到最好特别收入。

CloudFront

Amazon网络服务(AWS)版本的 CDN。

Amazon CloudFront
是一个内容分发网络服务。它好无缝化合入其他的Amazon网络服务产品,为开发者和集团分发内容到最终用户手中提供了平等种简易的计,整个过程还怀有低顺延、高转换快之性状,也绝非太小使用量的强制要求。

CDNperf

上述的 CDNs
并无克托管你随便的资源,它们往往就是托管最累用到的文本。固然对于线上产品来说将资源与服务器托管到个体的
CDN 上并无是无限好的计,但这种方法对分发资源来说如故是快捷与简易的。

CDNperf 可以帮您摸来最为抢和最可看重的 JavaScript
CDNS,让您的网站重新快还发出朝气。

澳门新葡亰亚洲在线 2

性测试

下边的那些性测试工具,使用了量化的法测试了网站受到诸如首字节加载时间(time
to first
byte)或者渲染时间等于表现。有些工具还会检讨特别检查资源是否为缓存,多少个CSS 或 JS 文件是否值得合并。

WebPagetest

WebPagetest
是性测试的金标准,它提供了大半面的量化目的用于性能测试,比如来一个中央的评分,用于评论时页面优化的程度;有一个截图,显示页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流…

据悉用户浏览器真实的连续速度,在中外范围外开展网页速度测试,并提供详细的优化提出。

澳门新葡亰亚洲在线 3

经过动 API
wrapper
,也能够以
WebPagetest 的相关服务丰硕到 NPM 模块和命令行工具被。

  • webpagetest-mapper:将
    WebPageTest 的测试数据易为而读之文档格式。
  • WPT Bulk
    Tester
    :使用 GoogleDocs 测试多单 URLs(要是你所有 API key,也得使 webpagetest.org
    来举办就桩事,或者其他公开而看的实例)。

Yslow

Yslow 基给 Yahoo
的高性能网页教条,分析网页的性能并被起响应慢的由来。

Google PageSpeed

PageSpeed 按照网页最佳实践分析以及优化测试的网页。

澳门新葡亰亚洲在线 4

PageSpeed 也时有暴发一个 CLI(Command Line Interface)工具:PSI(PageSpeed
Insights with reporting)

当构建进程被,能够应用 PSI
测试移动端和桌面端的习性,最终抱可读性杰出的测试结果。

澳门新葡亰亚洲在线 5

自我的网站都开到何去了?

评估网站在世界各地为每个移动端用户支出的珍惜本。

澳门新葡亰亚洲在线 6

Pingdom 网站速度测试

输入 URL 地址,即可测试页面加载速度,分析并找来性能瓶颈。

澳门新葡亰亚洲在线 7

SpeedCurve

SpeedCurve
既可为你追踪竞争对手的属性表现,也堪追踪自己的性表现。使用
SpeedCurve
时,你可以查阅有因素在不同站点的快展现。对于移动用户来说,他们期望网站在表哥大及加载起来如快速吃总结机,假设感到加载迟缓,往往会飞快关上网页,所以,网站的响应速度对他们很重大。

澳门新葡亰亚洲在线 8

Calibre

Calibre 可以匡助你追踪页面的加载时间,以及页面大小。问题页面(Janky
page)?是的,Calibre 会间接告诉您哪页面有问题。

澳门新葡亰亚洲在线 9

GT Metrix

GT Metrix 结合了 Google PageSpeed 和
YSlow,协理开发者创设飞速、高效与宏观优化的网页浏览体验。

澳门新葡亰亚洲在线 10

perf.js

在支付过程遭到,将性能的时序状况彰显在页面及。

perf bar

如出一辙种植简单的方法,用于快捷收集与查看网页性能,提供预置的量化标准,也襄助由定义的量化标准。

grunt-perfbudget

用来评估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的国有如故个体实例在一定的 URL
举行测试。它会合拿测试结果和您预期的性期望做比,即便低于预期,那么这么些task
就顺利完成了,若是领先了而预期的特性期望,那么即使谋面报失利,并且会拉您分析过预想的来头。

Sitespeed

Sitespeed.io
是一个基于最佳实践及有加载时序等量化标准的开源工具,有助于开发者分析网页的加载速度以及渲染性能。它会自开发者的站点收集两只页面的数目,依照最佳实践等规则来分析这么些网页,并拿结果因为
HTML 的款型出口,或者坐数值的款型发送到 Graphite。

speedgun

拖欠网站允许你用 Speedgun.js澳门新葡亰亚洲在线, 收集任意公开站点的性数据。它会面运行五破,并突显一个温馨之示图,帮助开发者了然当下页面的加载过程。

gulp size

显档次大小。

澳门新葡亰亚洲在线 11

浏览器工具盒插件

Chrome 开发者工具

以 Chrome
的开发者工具被,对于评估性能有些许只大实用之标签:Audits 和 Network

Audit
面板用于分析加载的页面。它可以供优化提议,缩短页面加载时间,加快页面的响应速度。

澳门新葡亰亚洲在线 12

Network
面板以动态的道实时地亮了资源的请与下载。即使辨析和固定这个请求会比纯粹的加载页面多花费片日,但这多少个消耗对于指引页面的性优化是大关键之。

澳门新葡亰亚洲在线 13

火狐开发者浏览器

欠浏览器是也开发者而创办的,专注于服务开发者的工作流。这是从第一次等,将构建、测试与扩张等服务集中为一体。

重复多音讯请查看 MDN 上的 Network
Monitor

Page performance

斯扩张插件应用被 Chrome
浏览器,可以开速分析时页面的习性。假若浏览器打开了大半独标签,那么该插件会自动分析当前页面的性能表现。

澳门新葡亰亚洲在线 14

审查

PerfAudit

咱俩审批页面的加载与渲染性能。对于令人反感的应慢和题材页面,我们来本分的使命提供高效、稳定及标准之页面。

Perfmonkey

PerfMonkey 让追踪页面的渲染性能变得最好简单。

SVG 和图片

ImageOptim

ImageOptim
是一个免费的利用,它以减图片体积、提升加载速度的又,还无会师牺牲图片质地。它优化了削减参数、移除了没用的条音讯以及免必不可少的颜料配置音信。

澳门新葡亰亚洲在线 15

其为足以为并入及 Grunt 和 Gulp 中。

SVGO

SVG Optimizer 是一个基于 Nodejs 的 SVG 矢量图形优化工具。

倘你待的凡相界面的操作,而不是
CLI,那么好下载者 APP

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,意在揭示 SVG
文件的显要问题,而非享有 SVGO 的总体而安排起。

澳门新葡亰亚洲在线 16

手动优化 SVGs

接近于其他的图形文件,SVG 也当于上线前于优化。即便来好多看似 Raymond的家伙得以拉您做这种优化,但不过好的法子尚是深远领悟其细节并开一些手动的优化。

Triamge

Triamge 是一个扩平台的 GUI 和 CLI
工具,用于优化网站的图样文件。它成使用 optipng、pngcrush、advpng 和
jpegoptim,并冲文件类型做优化(最新版本中,已经协助 PNG 和 JPG)。

澳门新葡亰亚洲在线 17

CSS

CSS Triggers

欠网站用于展示如何 CSS 属性可以影响浏览器的布局、渲染和外组成操作。

澳门新葡亰亚洲在线 18

还多关于 CSS-triggers
的音,可以点击这里翻

CSS Stats

拖欠网页应用为可视化的样式体现了开发者项目蒙有关 CSS 的总结音信。

澳门新葡亰亚洲在线 19

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染之中坚文件,所以要维持轻巧,便于迅速响应和渲染。

uncss

UnCSS 是一个用以移除脚本中没用 CSS
的工具。它可以审核多独文本,也得以核对由 JavaScript 注入的 CSS。

她为得为购并到 Grunt 和 Gulp 中。

Critical path

领取和整合 HTML 中重要之 CSS。

HTML

HTMLMinifier

HTMLMinifier 是一个冲天可安排、经过全面的测试、基于 JavaScript 的 HTML
压缩工具,并且放置了代码审查类的工具。

gulp-htmlmin

用来压缩 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用于压缩 HTML 的 grunt 插件。

JavaScript

uglifyjs

JavaScript 解析器、混淆、压缩和美化工具集。

它也得以吃合及 Grunt 和 Gulp 中。

汝或许并不需要某些 jQuery 插件

jQuery
及其附属工具都是异常优秀的品类,使用它们往往使开发工作轻松而又高效。

单,即便你正开一个库,那么您用考虑一下是不是真用负让
jQuery。也许你就待引入几行代码,就可废弃引入一个储藏室实现某些意义。假如您的库只是针对为高级浏览器,那么可能平昔调用浏览器的停放函数就好实现相关力量了。

澳门新葡亰亚洲在线 20

扩展阅读

澳门新葡亰亚洲在线 21

相关文章