乐趣区

关于javascript:8-种用于前端性能分析工具

jiezi

作者：Mahdhi Rezvi
译者：前端小智
起源：blog.bitsrc

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 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。

退出移动版