8 种用于前端性能分析工具

做者：Mahdhi Rezvi
译者：前端小智
来源：blog.bitsrc

点赞再看，微信搜索 【大迁世界】,B站关注 【前端小智】这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

咱们能够编写一些漂亮，且吸引人的网站，但若是该网站没法快速加载到浏览器中，人们每每会跳过它。 尽管有许多性能规则，但归根结底，这全都取决于加载时间。

根据 Jakob Nielson说法，在网建的网站时，须要注意如下几点：

• 小于100毫秒加载速度才是爽的
• 100ms到300ms 感受良好
• 一秒钟大概是用户思路不被打断的极限。用户会感受到延迟，但还能够接受
• 47%的用户但愿网页能在两秒或更短的时间内加载
• 40% 的用户若是网页加载超过 3 秒，表示会放弃该网站
• 10秒左右是用户注意力的极限。 大多数用户会在10秒后离开你的网站

如上所述，即便在最差的网络带宽上，也须要确保页面尽快加载。 但这个提及来容易作起来难。

为了能帮助更好的实现这一目标，这里推荐了几个性能分析工具。

1. PageSpeed Insights

这是一个免费的服务，分析网页的内容，而后提出建议，使该网页更快。它为您提供了关键指标，如第一个内容绘制，总阻塞时间和更多。度量标准被分类为Field Data、Origin Summary,Lab Data,Opportunities、Diagnostics 和Passed Audits。它还为咱们提供了进一步改进的建议。

2. Lighthouse

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 你能够将其做为一个 Chrome 扩展程序运行，或从命令行运行。 你为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，而后生成一个有关页面性能的报告。

今后处，您能够失败的测试为指示器，看看能够采起哪些措施来改进您的应用。

注意: Lighthouse 目前很是关注 Progressive Web App (PWA) 功能，如“添加到主屏幕”和离线支持。不过，此项目的首要目标是针对网络应用质量的各个方面提供端到端审查。

运行 Lighthouse 的方式有两种：做为 Chrome 扩展程序运行，或做为命令行工具运行。 Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。 命令行工具容许您将 Lighthouse 集成到持续集成系统。

3. WebPageTest

WebPageTest是一个在线的免费性能评测网站，支持IE，Chrome，使用真正的浏览器(IE和Chrome)和真实的消费者链接速度，从全球多个地点运行免费网站速度测试。能够运行简单的测试或执行高级测试，包括多步骤事务、视频捕获、内容阻塞等等。还将依据测试结果提供丰富的诊断信息，包括资源加载瀑布图，页面速度优化检查和改进建议，会给每一项内容一个最终的评级。

WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四个功能，咱们主要关注Advanced Testing。

如何使用WebPageTest

• 填写须要测试的URL
• 填写Test Location，下拉选择便可，可选移动端设备（包括Android、IOS），可选PC端（分地区，每一个地区可支持的浏览器不一样）
• 可选支持的浏览器
• 点击右侧START TEST

4. Pingdom

我最喜欢的功能是分析后的的摘要，其中会为咱们提供有关网站内容和请求的摘要。 我发现这对于了解网页上提供的内容有很大帮助。

5. Sitespeed.io

Sitespeed.io 是一款开源的Web性能测试工具，用来衡量Web网站的综合性能，帮助开发和测试人员分析网页的加载速度和渲染性能。

Sitespeed.io经过驱动浏览器（如：Chrome、Firefox）进行测试，而后从开发者的站点收集多个页面的数据，并根据最佳实践等规则来分析这些网页，而后将结果以HTML报告的形式输出。

Sitespeed.io 知足了一个完整的Web性能测试工具所需的3个关键功能：

1. 使用真实的浏览器测试Web站点，模拟真实的用户进行请求链接，收集以用户为中心的重要指标，如：响应速度指标、第一视觉呈现
2. 可分析页面的组成，并给出相应性能反馈，增长终端用户的使用体验友好性
3. 经过收集和保存页面组成的数据，便于跟踪定位

6. Calibre

Caliber 是一款多功能的性能监控套件，可帮助你监控和审核网站的性能。 它还容许你经过指定测试服务器的位置，管理模拟的广告首选项甚至模拟移动设备来模拟现实条件。 它还容许你设置预算，并经过为你提供性能降低来帮助你将预算保持在预算以内。

7. SpeedCurve

SpeedCurve 既可让你追踪竞争对手的性能表现，也能够追踪本身的性能表现。

使用 SpeedCurve 时，你能够查看某个因素在不一样站点的速度表现。对于移动用户来讲，他们但愿网站在手机上加载起来要快于电脑，若是感到加载迟缓，每每会迅速关上网页，因此，网站的响应速度对他们很重要。

SpeedCurve 还提供了综合监控。综合监控是在受控环境中模拟你的网站。你能够自定义选项，好比网络速度、设备、操做系统等等。

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

8. SpeedTracker

SpeedTracker是一个运行在WebPageTest之上的工具，可在你的网站上进行按期的性能测试，并直观显示各类性能指标随时间变化的方式。 这使你能够不断评估网站，并查看新功能如何影响网站的性能。 你还能够定义预算并经过电子邮件和Slack获取警报。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://blog.bitsrc.io/perfor...

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。