Web开发的各种性能工具,前端性能优化和测试工

2019-10-04 22:31 来源:未知

值得珍藏!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。

亚马逊(Amazon) 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 测量检验多少个 URubiconLs(假让你具备 API key,也得以使用 webpagetest.org 来做这事,也许其它公开可访问的实例)。

WebPagetest

WebPagetest 是性质测量检验的白银标准,它提供了多地方的量化目标用于品质测验,比方有三个基本的评分,用于批评当前页面优化的程度;有三个截图,显示页面加载后的视觉效果;还会有一个浏览器加载能源的瀑布流...

听他们讲顾客浏览器真实的连年速度,在海内外限量内打开网页速度测验,并提供详实的优化建议。

图片 6webpagetest

通过运用 API wrapper,也能够将 WebPagetest 的连锁服务丰裕到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测验数据转变为可读的文档格式。
  • WPT Bulk Tester:使用 谷歌 Docs 测验四个 U牧马人Ls(假如您有所 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 网址速度测验

输入 U酷威L 地址,就可以测验页面加载速度,深入分析并寻找质量瓶颈。

图片 13

Pingdom 网址速度测验

输入 U福特ExplorerL 地址,就可以测验页面加载速度,深入分析并找寻质量瓶颈。

图片 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猎豹CS6L 实行测验。它会将测量检验结果和你预期的习性期望做比较,如若低于预期,那么那些task 就顺遂实现了,假设高出了你预期的质量期待,那么就可以告诉退步,何况会支援你深入分析高出预想的来头。

grunt-perfbudget

用以评估品质的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的国有或个人实例在特定的 URAV4L 实行测验。它会将测试结果和您预期的性质期待做比较,假使低于预期,那么这几个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 也理应在上线前被优化。固然有成都百货上千近似 雷Mond的工具得以帮您做这种优化,但最佳的格局依旧尖锐掌握其细节并做一些手动的优化。

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 和 居尔p 中。

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 和 Gulp 中。

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

HTML迷你fier 是二个中度可配置、经过周详的测验、基于 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

TAG标签:
版权声明:本文由金沙澳门唯一官网发布于前端开发,转载请注明出处:Web开发的各种性能工具,前端性能优化和测试工