值得收藏,前端性能优化和测试工具总结

时间:2019-10-06 09:06来源:网页制作
值得珍藏!Web开荒的种种品质工具 2015/06/22 · HTML5 ·性能 原来的作品出处: RobinRendle   译文出处:南北    嗨,各位,又到了星期日计算时间!得益于大批量的 Grunt 和 Gulp插件,我们

值得珍藏!Web开荒的种种品质工具

2015/06/22 · HTML5 · 性能

原来的作品出处: Robin Rendle   译文出处:南北   

嗨,各位,又到了星期日计算时间!得益于大批量的 Grunt 和 Gulp 插件,我们能够轻便达成网址数据的可视化,尽管浓密通晓那一个工具还相比困难,但比物连类的将它们列出来,也是很有帮助的。

翻译自:

内容分发网络(CDN)

CDN 能够帮您把网址的财富分发到世界外省,有利于增高网址的响应速度,当然,那对于那么些特殊地区的顾客是收效甚微的。

嗨,各位,又到了星期天总结时间!得益于多量的 Grunt 和 Gulp 插件,大家能够轻巧实现网址数据的可视化,就算深远理解这几个工具还相比较艰难,但分门别类的将它们列出来,也是很有支持的。

CloudFlare

CloudFlare 的有力之处在于它能够成为你的 DNS 服务器(CDN 只是它具备服务的二个组成部分),那样对你的网址发起的全部乞求都会因而它。

CloudFlare 的 CDN 在过去十七年的陈设性和进化中,并不曾平昔的寒酸和封建。大家的专利手艺中足够利用了新式的才干提高,富含并不压迫硬件、web 服务器和网络路由。换言之,我们革新的建设了新一代的 CDN。新的 CDN 配置轻便、价格低廉,其品质也决然比你利用过的别的守旧 CDN 都要精粹。

CDN 能够帮你把网址的能源分发到世界外市,有协助压实网站的响应速度,当然,那对于那几个特殊地区的客户是收效甚微的。

MaxCDN

CSS-Tricks 当前就在运用 马克斯CDN 托管全体的静态财富。它能够无缝地融合WordPres 和 W3 的具有缓存财富,所以大家没有供给做什么样极度管理,就能够将能源移入 CDN,并能保障链接的正确性。

图片 1

对于叁个博客来讲,思索到中间的大文件根本是 JavaScript、CSS 和图表,并非录制等品种,那贷款占用的可真多。

咱俩的 CDN 服务均等是多个网址加快器和实时调整中央。创设它,正是为着让网址的客商和平运动维都能从下一代 CDN 中获得最大收入。

CloudFlare

CloudFlare 的强劲之处在于它能够改为你的 DNS 服务器(CDN 只是它具有服务的二个组成都部队分),那样对你的网址发起的富有央求都会经过它。

CloudFlare 的 CDN 在过去十三年的布置和升华东,并未向来的保守和保守。大家的专利技艺中丰富利用了新型的技艺提升,包涵并不限于硬件、web 服务器和网络路由。换言之,我们立异的建设了后辈的 CDN。新的 CDN 配置轻松、价格低廉,其性质也分明比你采用过的任何守旧 CDN 都要完美。

CloudFront

亚马逊(亚马逊(Amazon))互联网服务(AWS)版本的 CDN。

亚马逊(亚马逊(Amazon)) CloudFront 是一个剧情分发互联网服务。它能够无缝融入入其余的亚马逊(亚马逊(Amazon))互连网服务产品,为开辟者和商店分发内容到最后客商手中提供了一种轻易的方式,整个经过都存有低顺延、高调换速度的特征,也并未最小使用量的勒迫要求。

MaxCDN

CSS-Tricks 当前就在接纳 马克斯CDN 托管全部的静态能源。它能够无缝地融合WordPres 和 W3 的富有缓存能源,所以大家无需做什么极其管理,就能够将财富移入 CDN,并能保险链接的准头。

图片 2对此二个博客来说,思虑到个中的大文件重大是 JavaScript、CSS 和图纸,而不是摄像等种类,那带宽占用的可真多。

我们的 CDN 服务同样是三个网址加快器和实时间调整制中央。创造它,就是为了让网址的客户和平运动维都能从下一代 CDN 中赢得最大收益。

CDNperf

上述的 CDNs 并无法托管你轻巧的能源,它们往往只是托管最频仍用到的文件。即便对于线上产品以来将财富和服务器托管到个体的 CDN 上并不是最棒的法子,但这种形式对于分发财富来讲依然是快速和轻便的。

CDNperf 能够帮你寻觅最快和最可相信任的 JavaScript CDNS,让您的网址越来越快更有朝气。

图片 3

CloudFront

亚马逊(Amazon)互联网服务版本的 CDN。

亚马逊(亚马逊) CloudFront 是一个内容分发网络服务。它能够无缝融入入别的的亚马逊(亚马逊(Amazon))互联网服务产品,为开荒者和集团分发内容到最后客商手中提供了一种简单的措施,整个经过都具有低顺延、高调换速度的特色,也并未有最小使用量的威迫须求。

属性测量检验

下边包车型客车这个质量测量试验工具,使用了量化的章程测量试验了网址中诸如首字节加载时间(time to first byte)或许渲染时间等表现。有些工具还有可能会检查特检财富是还是不是被缓存,多少个CSS 或 JS 文件是还是不是值得合併。

CDNperf

上述的 CDNs 并不可能托管你随便的能源,它们往往只是托管最频仍用到的文件。即便对于线上产品以来将财富和服务器托管到个人的 CDN 上并非最佳的艺术,但这种艺术对于分发财富来讲还是是连忙和精炼的。

CDNperf 能够帮您找寻最快和最可靠任的 JavaScript CDNS,令你的网址更加快更有朝气。

图片 4cdnperf

下边包车型地铁那一个品质测量试验工具,使用了量化的不二等秘书技测量试验了网址中诸如首字节加载时间(time to first byte)或许渲染时间等表现。有些工具还会检讨特检资源是或不是被缓存,几个CSS 或 JS 文件是还是不是值得合併。

WebPagetest

WebPagetest 是性质测量检验的黄金规范,它提供了多地点的量化指标用于品质测量试验,举例有八个宗旨的评分,用于批评当前页面优化的程度;有叁个截图,呈现页面加载后的视觉效果;还会有八个浏览器加载能源的瀑布流…

依据客商浏览器真实的接连速度,在大地范围内张开网页速度测量试验,并提供详细的优化提议。

图片 5

经过行使 API wrapper,也足以将 WebPagetest 的相关服务丰富到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测量检验数据调换为可读的文书档案格式。
  • WPT Bulk Tester:使用 GoogleDocs 测量检验四个 U奥迪Q7Ls(要是您抱有 API key,也足以使用 webpagetest.org 来做这事,只怕另外公开可访谈的实例)。

WebPagetest

WebPagetest 是性质测验的金子标准,它提供了多地点的量化指标用于品质测量检验,比方有三个着力的评分,用于探讨当前页面优化的档期的顺序;有多少个截图,展现页面加载后的视觉效果;还会有一个浏览器加载能源的瀑布流...

基于顾客浏览器真实的一连速度,在海内外限量内举行网页速度测量检验,并提供详实的优化提议。

图片 6webpagetest

通过运用 API wrapper,也得以将 WebPagetest 的相关服务丰富到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测量试验数据转变为可读的文书档案格式。
  • WPT Bulk Tester:使用 谷歌(Google) Docs 测量试验两个 UENCORELs(假如您有所 APIkey,也足以动用 webpagetest.org 来做那事,大概别的公开可访谈的实例)。

Yslow

Yslow 基于 Yahoo 的高质量网页教条,深入分析网页的品质并交付响应缓慢的原故。

Yslow

Yslow 基于 Yahoo 的高质量网页教条,剖析网页的属性并交由响应缓慢的因由。

Google PageSpeed

PageSpeed 依据网页最好实践解析和优化测量检验的网页。

图片 7

PageSpeed 也是有二个 CLI(Command Line Interface)工具:PSI(PageSpeed Insights with reporting)

在构建进度中,能够应用 PSI 测量检验移动端和桌面端的质量,最后收获可读性优秀的测量试验结果。

图片 8

Google PageSpeed

PageSpeed 依照网页最好执行深入分析和优化测量试验的网页。

图片 9google pagespeed

PageSpeed 也会有多少个 CLI(Command Line Interface)工具:PSI(PageSpeed Insights with reporting)

在构建进度中,能够行使 PSI 测量检验移动端和桌面端的性质,最后获得可读性优良的测验结果。

图片 10google pagespeed

本人的网站都付出到哪里去了?

评估网址在世界各州为种种移动端客户支出的维护成本。

图片 11

本身的网站都付出到哪个地方去了?

评估网址在世界内地为各个移动端用户支出的维护开支。

图片 12what does my site cost?

Pingdom 网址速度测量试验

输入 UCRUISERL 地址,就能够测验页面加载速度,深入分析并搜索质量瓶颈。

图片 13

Pingdom 网址速度测验

输入 U帕杰罗L 地址,就能够测量检验页面加载速度,剖析并找寻品质瓶颈。

图片 14pingdom

SpeedCurve

SpeedCurve 不只能够令你追踪竞争对手的习性表现,也足以跟踪自个儿的本性表现。使用 SpeedCurve 时,你可以查阅有个别因素在不相同站点的快慢呈现。对于移动客户来讲,他们希望网址在手提式无线电话机上加载起来要快于Computer,就算感觉加载迟缓,往往会快捷关上网页,所以,网址的响应速度对他们十分重大。

图片 15

SpeedCurve

SpeedCurve 不仅能够让您追踪竞争对手的品质表现,也能够追踪自个儿的性质表现。使用 SpeedCurve 时,你能够查看有些因素在分歧站点的进程突显。对于移动客户来讲,他们期望网址在三哥大上加载起来要快于计算机,假使感觉加载迟缓,往往会火速关上网页,所以,网址的响应速度对她们很要紧。

图片 16speedcurve

Calibre

Calibre 能够帮你追踪页面包车型大巴加载时间,以及页面大小。问题页面(Janky page)?是的,Calibre 会直接告诉你怎么着页面万分。

图片 17

Calibre

Calibre 能够帮你追踪页面包车型大巴加载时间,以及页面大小。难题页面(Janky page)?是的,Calibre 会直接告诉你怎么着页面不不荒谬。

图片 18image

GT Metrix

GT Metrix 结合了 谷歌(Google) PageSpeed 和 YSlow,支持开荒者成立神速、高效和周到优化的网页浏览体验。

图片 19

GT Metrix

GT Metrix 结合了 Google PageSpeed 和 YSlow,辅助开垦者创制火速、高效和宏观优化的网页浏览体验。

图片 20image

perf.js

在付出进程中,将质量的时序情况展现在页面上。

perf.js

在开拓进程中,将质量的时序情形展现在页面上。

perf bar

一种简易的法子,用于火速采撷和查阅网页品质,提供预置的量化规范,也支撑自定义的量化规范。

perf bar

一种简易的措施,用于快捷搜集和查阅网页品质,提供预置的量化规范,也支撑自定义的量化规范。

grunt-perfbudget

用来评估质量的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或个人实例在特定的 U本田CR-VL 举行测量试验。它会将测量检验结果和您预期的性质期望做相比较,借使低于预期,那么这个task 就顺遂完毕了,假若超越了您预期的属性期望,那么就能告知战败,何况会拉拉扯扯您分析超出预期的原因。

grunt-perfbudget

用于评估品质的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或个体实例在一定的 UEvoqueL 进行测量试验。它会将测量试验结果和您预期的质量期待做相比,假使低于预期,那么这些task 就顺遂完结了,假诺超越了您预期的习性期待,那么就能够告诉失败,况兼会扶助你分析赶过预期的原故。

Sitespeed

Sitespeed.io 是二个依据最好实施以及部分加载时序等量化标准的开源工具,有扶助开荒者深入分析网页的加载速度和渲染品质。它会从开荒者的站点搜聚多个页面包车型客车数目,依照最好实施等准绳来深入分析那些网页,并将结果以 HTML 的样式出口,恐怕以数值的样式发送到 Graphite。

Sitespeed

Sitespeed.io 是贰个依据最佳实行以及部分加载时序等量化标准的开源工具,有利于开采者剖析网页的加载速度和渲染质量。它会从开辟者的站点搜聚多个页面包车型客车数据,依照最好施行等法则来深入分析那一个网页,并将结果以 HTML 的花样出口,或然以数值的花样发送到 Graphite。

speedgun

该网址允许你采用 Speedgun.js 搜罗任意公开站点的品质数据。它会运作四回,并显示一个投机的示图,帮忙开荒者掌握当前页面的加载进度。

speedgun

该网址允许你使用 Speedgun.js 收罗放肆公开站点的习性数据。它会运行七遍,并显示二个谈得来的示图,协理开荒者精晓当下页面包车型地铁加载过程。

gulp size

展示档次大小。

图片 21

gulp size

来得等级次序大小。

图片 22image

浏览器工具盒插件

Chrome 开辟者工具

在 Chrome 的开垦者工具中,对于评估质量有八个特别有效的竹签:奥迪ts 和 Network。

奥迪(Audi)t 面板用于深入分析加载的页面。它能够提供优化建议,减弱页面加载时间,加快页面包车型地铁响应速度。

图片 23image

Network 面板以动态的不二秘诀实时地显示了财富的乞求和下载。即便分析和牢固这一个央求会比纯粹的加载页面多花一些时间,但这个消耗对于引导页面包车型大巴品质优化是可怜首要的。

图片 24image

Chrome 开辟者工具

在 Chrome 的开采者工具中,对于评估品质有五个非常有效的竹签:Audits 和 Network。

奥迪t 面板用于解析加载的页面。它能够提供优化提出,减弱页面加载时间,加速页面包车型客车响应速度。

图片 25

Network 面板以动态的措施实时地出示了财富的哀求和下载。即便分析和确定地点那一个乞请会比纯粹的加载页面多花一些时刻,但这一个消耗对于指引页面包车型客车属性优化是不行主要的。

图片 26

火狐开荒者浏览器

该浏览器是为开辟者而创制的,潜心于服务开辟者的专门的学业流。那是素有第一遍,将营造、测量试验和庞大等服务聚焦于一体。

更加多音讯请查看 MDN 上的 Network Monitor。

火狐开拓者浏览器

该浏览器是为开垦者而创办的,专心于劳动开荒者的专门的学问流。那是一直第三遍,将创设、测量检验和增加等劳动聚焦于一体。

愈来愈多音信请查看 MDN 上的 Network Monitor。

Page performance

其一扩张插件应用于 Chrome 浏览器,能够开速深入分析当前页面包车型客车品质。假设浏览器展开了四个标签,那么该插件会自动分析当前页面包车型地铁习性表现。

图片 27image

Page performance

那一个扩张插件应用于 Chrome 浏览器,能够开速分析当前页面包车型地铁性格。假使浏览器张开了多少个标签,那么该插件会活动深入分析当前页面包车型地铁品质表现。

图片 28

PerfAudit

咱俩核算页面包车型客车加载和渲染品质。对于令人抵触的响应缓慢和难点页面,大家有本分的沉重提供快捷、稳固和高精度的页面。

审查

Perfmonkey

PerfMonkey 让追踪页面的渲染质量变得最为轻松。

PerfAudit

我们审查批准页面包车型地铁加载和渲染质量。对于令人厌恶的响应缓慢和难点页面,我们有本分的重任提供快捷、稳固和标准的页面。

ImageOptim

ImageOptim 是二个无需付费的应用,它在收缩图片体量、升高加载速度的同不经常间,还不会捐躯图片品质。它优化了滑坡参数、移除了没用的头新闻和非须要的水彩配置音信。

图片 29image

它也足以被合併到 Grunt 和 Gulp 中。

Perfmonkey

PerfMonkey 让追踪页面包车型地铁渲染质量变得极度轻易。

SVGO

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

设若您须求的是互相分界面包车型地铁操作,并非 CLI,那么可以下载那几个 应用程式。

SVG 和图片

SVGOMG

SVGOMG 是 SVGO's Missing GUI 的缩写,目的在于揭发 SVG 文件的重视难点,而不抱有 SVGO 的完全可安插项。

图片 30image

ImageOptim

ImageOptim 是三个免费的施用,它在调整和收缩图片容量、升高加载速度的还要,还不会捐躯图片品质。它优化了削减参数、移除了不算的头音信和非须求的水彩配置音信。

图片 31

它也足以被合併到 Grunt 和 Gulp 中。

手动优化 SVGs

类似于其余的图形文件,SVG 也应该在上线前被优化。即使有好些个像样 Raymond的工具得以帮您做这种优化,但最佳的格局仍然深远掌握其细节并做一些手动的优化。

SVGO

SVG Optimizer 是二个依照 Nodejs 的 SVG 矢量图形优化学工业具。

假如您供给的是相互分界面包车型客车操作,而不是CLI,那么能够下载那些 APP。

Triamge

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

图片 32image

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,目的在于揭穿 SVG 文件的主要难点,而不具备 SVGO 的完全可配置项。

图片 33

CSS Triggers

该网址用于体现怎么着 CSS 属性能够影响浏览器的布局、渲染和任何组成操作。

图片 34image

更加的多关于 CSS-triggers 的音讯,能够点击这里查看。

手动优化 SVGs

看似于任何的图形文件,SVG 也相应在上线前被优化。尽管有非常多类似 Raymond的工具得以帮您做这种优化,但最棒的秘籍如故尖锐领会其细节并做一些手动的优化。

CSS Stats

该网页应用以可视化的方式体现了开荒者项目中关于 CSS 的计算新闻。

图片 35image

Triamge

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

图片 36

CSS Shrink

CSS 压缩工具。由于 CSS 是页面渲染的骨干文件,所以必需保障轻松,便于急迅响应和渲染。

CSS

uncss

UnCSS 是一个用于移除脚本中没用 CSS 的工具。它能够核查多少个公文,也足以查处由 JavaScript 注入的 CSS。

它也足以被并入到 Grunt 和 Gulp 中。

CSS Triggers

该网站用于呈现什么 CSS 属性能够影响浏览器的布局、渲染和其他组成操作。

图片 37

更加多关于 CSS-triggers 的音信,能够点击这里查看。

Critical path

领取和整合 HTML 中着重的 CSS。

CSS Stats

该网页应用以可视化的花样显得了开垦者项目中关于 CSS 的总结音讯。

图片 38

HTMLMinifier

HTMLMinifier 是贰个惊人可陈设、经过周全的测量试验、基于 JavaScript 的 HTML 压缩工具,况且放置了代码审核类的工具。

CSS Shrink

CSS 压缩工具。由于 CSS 是页面渲染的主干文件,所以必须保持轻松,便于快捷响应和渲染。

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

uncss

UnCSS 是三个用以移除脚本中没用 CSS 的工具。它能够核实多少个文本,也得以核查由 JavaScript 注入的 CSS。

它也得以被购并到 Grunt 和 Gulp 中。

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

Critical path

领取和组合 HTML 中根本的 CSS。

uglifyjs

JavaScript 分析器、混淆、压缩和美化学工业具集。

它也足以被并入到 Grunt 和 居尔p 中。

HTML

您可能并无需有些 jQuery 插件

jQuery 及其从属工具都以那些优异的项目,使用它们往往使支付专门的学问轻易而又快速。

一方面,假如你正在开辟三个库,那么您要求观念一下是不是真正须要借助于 jQuery。恐怕你只须求引进几行代码,就足以甩掉引进一个库实现某个职能。假诺你的库只是针对性于高档浏览器,那么可能一向调用浏览器的嵌入函数就可以达成相关功能了。

图片 39image

  • Usertiming API
  • Jank Free
  • Scrolling performance
  • Mobile web performance auditing
  • Gone in 60 frames per second
  • Udacity course on rendering performance

HTMLMinifier

HTMLMinifier 是壹其中度可配置、经过周详的测量检验、基于 JavaScript 的 HTML 压缩工具,况兼放置了代码核实类的工具。

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用以压缩 HTML 的 grunt 插件。

JavaScript

uglifyjs

JavaScript 深入分析器、混淆、压缩和美化学工业具集。

它也得以被并入到 Grunt 和 Gulp 中。

您大概并没有必要某个 jQuery 插件

jQuery 及其直属工具都是特别优良的项目,使用它们往往使开拓职业轻便而又急速。

一边,假诺您正在开辟二个库,那么你必要思虑一下是还是不是真正须要信任于 jQuery。或然你只供给引进几行代码,就可以抛弃引进二个库完结某个效用。如果您的库只是指向于高等浏览器,那么只怕直接调用浏览器的放置函数就足以兑现相关成效了。

图片 40

扩大阅读

  • Usertiming API
  • Jank Free
  • Scrolling performance
  • Mobile web performance auditing
  • Gone in 60 frames per second
  • Udacity course on rendering performance

    1 赞 6 收藏 评论

图片 41

编辑:网页制作 本文来源:值得收藏,前端性能优化和测试工具总结

关键词: