前端性能优化和测试工具总结

By admin in 计算机教程 on 2019年2月16日

Google PageSpeed

PageSpeed 根据网页最佳实践分析和优化测试的网页。

图片 1

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

在构建进程中,可以使用 PSI
测试移动端和桌面端的性能,最终得到可读性良好的测试结果。

图片 2

翻译自:https://css-tricks.com/performance-tools/

Yslow

Yslow 基于 Yahoo
的高性能网页教条,分析网页的性能并给出响应缓慢的原因。

Sitespeed

Sitespeed.io
是一个基于最佳实践以及一些加载时序等量化标准的开源工具,有助于开发者分析网页的加载速度和渲染性能。它会从开发者的站点收集多个页面的数据,根据最佳实践等规则来分析这些网页,并将结果以
HTML 的形式输出,或者以数值的形式发送到 Graphite。

MaxCDN

CSS-Tricks 当前就在使用 MaxCDN 托管所有的静态资源。它可以无缝地融合
WordPres 和 W3
的所有缓存资源,所以我们无需做什么特别处理,即可将资源移入
CDN,并能保证链接的准确性。

图片 3

对于一个博客来说,考虑到其中的大文件主要是 JavaScript、CSS
和图片,而不是视频等类型,这贷款占用的可真多。

我们的 CDN
服务同样是一个网站加速器和实时控制中心。创建它,就是为了让网站的用户和运维都能从下一代
CDN 中获得最大收益。

HTMLMinifier

HTMLMinifier 是一个高度可配置、经过完善的测试、基于 JavaScript 的 HTML
压缩工具,并且内置了代码审查类的工具。

浏览器工具盒插件

grunt-contrib-htmlmin

用于压缩 HTML 的 grunt 插件。

ImageOptim

ImageOptim
是一个免费的应用,它在减少图片体积、提高加载速度的同时,还不会牺牲图片质量。它优化了压缩参数、移除了无用的头信息和非必要的颜色配置信息。

图片 4

它也可以被集成到 Grunt 和 Gulp 中。

CDNperf

上述的 CDNs
并不能托管你任意的资源,它们往往只是托管最频繁用到的文件。虽然对于线上产品来说将资源和服务器托管到私有的
CDN 上并不是最好的方式,但这种方式对于分发资源来说仍然是快速和简单的。

CDNperf 可以帮你找出最快和最可信赖的 JavaScript
CDNS,让你的网站更快更有朝气。

图片 5

cdnperf

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估性能有两个非常有用的标签:Audits 和 Network

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

图片 6

Network
面板以动态的方式实时地展示了资源的请求和下载。虽然辨析和定位这些请求会比纯粹的加载页面多花一些时间,但这些消耗对于指导页面的性能优化是非常重要的。

图片 7

GT Metrix

GT Metrix 结合了 Google PageSpeed 和
YSlow,帮助开发者创建快速、高效和全面优化的网页浏览体验。

图片 8

image

SpeedCurve

SpeedCurve
既可以让你追踪竞争对手的性能表现,也可以追踪自己的性能表现。使用
SpeedCurve
时,你可以查看某个因素在不同站点的速度表现。对于移动用户来说,他们希望网站在手机上加载起来要快于电脑,如果感到加载迟缓,往往会迅速关上网页,所以,网站的响应速度对他们很重要。

图片 9

Critical path

提取和整合 HTML 中关键的 CSS。

Pingdom 网站速度测试

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

图片 10

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估性能有两个非常有用的标签:Audits

Network

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

图片 11

image

Network
面板以动态的方式实时地展示了资源的请求和下载。虽然辨析和定位这些请求会比纯粹的加载页面多花一些时间,但这些消耗对于指导页面的性能优化是非常重要的。

图片 12

image

SVGO

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

如果你需要的是交互界面的操作,而不是
CLI,那么可以下载这个 APP

gulp size

显示项目大小。

图片 13

image

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

CSS Triggers

该网站用于展示哪些 CSS 属性可以影响浏览器的布局、渲染和其他组合操作。

图片 14

image

更多有关 CSS-triggers
的消息,可以点击这里查看

perf bar

一种简单的方式,用于快速收集和查看网页性能,提供预置的量化标准,也支持自定义的量化标准。

ImageOptim

ImageOptim
是一个免费的应用,它在减少图片体积、提高加载速度的同时,还不会牺牲图片质量。它优化了压缩参数、移除了无用的头信息和非必要的颜色配置信息。

图片 15

image

它也可以被集成到 Grunt 和 Gulp 中。

grunt-contrib-htmlmin

用于压缩 HTML 的 grunt 插件。

Triamge

Triamge 是一个扩平台的 GUI 和 CLI
工具,用于优化网站的图片文件。它组合使用 optipng、pngcrush、advpng 和
jpegoptim,并根据文件类型做优化(最新版本中,已经支持 PNG 和 JPG)。

图片 16

image

uglifyjs

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

它也可以被集成到 Grunt 和 Gulp 中。

性能测试

下面的这些性能测试工具,使用了量化的方式测试了网站中诸如首字节加载时间(time
to first
byte)或者渲染时间等表现。有些工具还会检查特别检查资源是否被缓存,多个
CSS 或 JS 文件是否值得合并。

Critical path

提取和整合 HTML 中关键的 CSS。

Page performance

这个扩展插件应用于 Chrome
浏览器,可以开速分析当前页面的性能。如果浏览器打开了多个标签,那么该插件会自动分析当前页面的性能表现。

图片 17

image

你也许并不需要某些 jQuery 插件

jQuery
及其附属工具都是非常优秀的项目,使用它们往往使开发工作轻松而又快捷。

另一方面,如果你正在开发一个库,那么你需要思考一下是否真的需要依赖于
jQuery。也许你只需要引入几行代码,就可以放弃引入一个库实现某些功能。如果你的库只是针对于高级浏览器,那么可能直接调用浏览器的内置函数就可以实现相关功能了。

图片 18

内容分发网络(CDN)

CDN
可以帮你把网站的资源分发到世界各地,有助于提高网站的响应速度,当然,这对于那些特殊地区的用户是收效甚微的。

CloudFlare

CloudFlare 的强大之处在于它可以成为你的 DNS 服务器(CDN
只是它所有服务的一个组成部分),这样对你的网站发起的所有请求都会经过它。

CloudFlare 的 CDN
在过去十五年的设计和发展中,并没有一味的守旧和固步自封。我们的专利技术中充分利用了最新的技术进步,包括并不限于硬件、web
服务器和网络路由。换言之,我们创新的建设了下一代的 CDN。新的 CDN
配置简单、价格低廉,其性能也一定比你使用过的任何传统 CDN 都要优秀。

Perfmonkey

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

Page performance

这个扩展插件应用于 Chrome
浏览器,可以开速分析当前页面的性能。如果浏览器打开了多个标签,那么该插件会自动分析当前页面的性能表现。

图片 19

SpeedCurve

SpeedCurve
既可以让你追踪竞争对手的性能表现,也可以追踪自己的性能表现。使用
SpeedCurve
时,你可以查看某个因素在不同站点的速度表现。对于移动用户来说,他们希望网站在手机上加载起来要快于电脑,如果感到加载迟缓,往往会迅速关上网页,所以,网站的响应速度对他们很重要。

图片 20

speedcurve

火狐开发者浏览器

该浏览器是为开发者而创造的,专注于服务开发者的工作流。这是有史以来第一次,将构建、测试和扩展等服务集中于一体。

更多信息请查看 MDN 上的 Network
Monitor

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

Sitespeed

Sitespeed.io
是一个基于最佳实践以及一些加载时序等量化标准的开源工具,有助于开发者分析网页的加载速度和渲染性能。它会从开发者的站点收集多个页面的数据,根据最佳实践等规则来分析这些网页,并将结果以
HTML 的形式输出,或者以数值的形式发送到 Graphite。

SVGO

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

如果你需要的是交互界面的操作,而不是 CLI,那么可以下载这个
APP

审查

我的网站都开销到哪里去了?

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

图片 21

what does my site cost?

JavaScript

uglifyjs

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

它也可以被集成到 Grunt 和 Gulp 中。

uncss

UnCSS 是一个用于移除脚本中无用 CSS
的工具。它可以审查多个文件,也可以审查由 JavaScript 注入的 CSS。

它也可以被集成到 Grunt 和 Gulp 中。

speedgun

该网站允许你使用
Speedgun.js
收集任意公开站点的性能数据。它会运行五次,并显示一个友好的示图,帮助开发者了解当前页面的加载过程。

CSS Triggers

该网站用于展示哪些 CSS 属性可以影响浏览器的布局、渲染和其他组合操作。

图片 22

更多有关 CSS-triggers
的消息,可以点击这里查看

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,旨在揭露 SVG
文件的主要问题,而不具有 SVGO 的完整可配置项。

图片 23

image

gulp size

显示项目大小。

图片 24

CSS

GT Metrix

GT Metrix 结合了 Google PageSpeed 和
YSlow,帮助开发者创建快速、高效和全面优化的网页浏览体验。

图片 25

SVG 和图片

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门金沙30064在线网站 版权所有