作者：MahdhiRezvi译者：前端小智来源：blog.bitsrc喜欢就看，微信搜索【大招天下】关注这个没有大佬的背景工厂，但它有上升趋势积极的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。我们可以编写漂亮、有吸引力的网站，但如果该网站不能在浏览器中快速加载，人们往往会跳过它。虽然有很多性能规则，但归根结底，一切都与加载时间有关。据JakobNielson介绍，在互联网上建立网站时，需要注意以下几点：加载速度小于100毫秒，加载速度很酷。100ms到300ms感觉不错。一秒大概是用户不被打扰的极限。用户会感觉到延迟，但可以接受47%的用户希望网页在两秒或更短时间内加载如果网页加载超过3秒，40%的用户将放弃网站大约10秒是用户的注意力极限。大多数用户会在10秒后离开您的站点如上所述，即使在最差的网络带宽下，您也需要确保您的页面加载速度尽可能快。但这说起来容易做起来难。为了帮助更好地实现这个目标，这里推荐几款性能分析工具。1.PageSpeedInsights这是一项免费服务，可以分析网页内容，然后提出建议，使该网页更快。它为您提供关键指标，例如首次内容绘制、总阻塞时间等。指标分为现场数据、来源摘要、实验室数据、机会、诊断和通过的审计。它还为我们提供了进一步改进的建议。2.LighthouseLighthouse是一个开源的自动化工具，用于提高网络应用程序的质量。您可以将其作为Chrome扩展程序或从命令行运行。您为Lighthouse提供一个您想要查看的URL，它会对页面运行一系列测试，然后生成关于页面性能的报告。从这里，您可以使用失败的测试作为指标，看看您可以做些什么来改进您的应用程序。注意：Lighthouse目前主要关注渐进式Web应用程序(PWA)功能，例如“添加到主屏幕”和离线支持。但是，该项目的主要目标是提供对Web应用程序质量各个方面的端到端审查。有两种运行Lighthouse的方式：作为Chrome扩展，或作为命令行工具。Chrome扩展程序提供了更加人性化的界面，便于阅读报告。一个命令行工具，允许您将Lighthouse集成到持续集成系统中。3.WebPageTestWebPageTest是一个在线免费性能评估网站，支持IE、Chrome，使用真实浏览器（IE和Chrome）和真实消费者连接速度，从全球多个地点运行免费网站速度测试。可以运行简单测试或执行高级测试，包括多步事务、视频捕获、内容阻止等。它还会根据测试结果提供丰富的诊断信息，包括资源加载瀑布图、页面速度优化检查和改进建议，并对每个内容进行最终评分。WebpageTest主要提供四个功能：高级测试、简单测试、可视化比较、Traceroute。我们主要专注于高级测试。如何使用WebPageTest填写要测试的URL填写TestLocation，下拉选择，可选移动设备（包括Android，IOS），可选PC（按地区，每个地区可以支持不同的浏览器）可选支持单击浏览器右侧的STARTTEST4.Pingdom我最喜欢的功能是事后分析摘要，它为我们提供了网站内容和请求的摘要。我发现这对了解网页上提供的内容有很大帮助。5.Sitespeed.ioSitespeed.io是一款开源的网页性能测试工具，用于衡量网站的整体性能，帮助开发和测试人员分析网页的加载速度和渲染性能。Sitespeed.io通过驱动浏览器（如Chrome、Firefox）进行测试，然后从开发者站点的多个页面收集数据，根据最佳实践等规则分析这些网页，然后以HTML报告的形式报告结果输出。Sitespeed.io满足一个完整的Web性能测试工具所需的3个关键功能：使用真实浏览器测试网站，模拟真实用户请求连接，收集重要的以用户为中心的指标，例如：响应速度指标和第一视觉指标presentation可以分析页面的构成，并给出相应的性能反馈，增加终端用户的易用性。通过对页面构成的数据进行采集和保存，便于跟踪和定位。6.CalibreCaliber是一个多功能的性能监控套件，可以帮助您监控和审计您网站的性能。它还允许您通过指定测试服务器位置、管理模拟广告偏好，甚至模拟移动设备来模拟真实世界的条件。它还允许您设置预算，并通过提高性能来帮助您保持在预算范围内。7.SpeedCurveSpeedCurve允许您跟踪您的竞争对手以及您自己的表现。使用SpeedCurve时，您可以查看一个因素在不同站点的速度表现。对于移动用户，他们希望网站在手机上的加载速度比在电脑上的加载速度快。如果他们觉得加载缓慢，他们往往会快速关闭网页。因此，网站的响应能力对他们来说非常重要。SpeedCurve还提供综合监控。综合监控是在受控环境中模拟您的网站。您可以自定义选项，例如网络速度、设备、操作系统等。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。8.SpeedTrackerSpeedTracker是一个运行在WebPageTest之上的工具，它可以对你的网站进行定期的性能测试，并直观地显示各种性能指标随时间的变化情况。这使您可以不断评估您的网站并了解新功能如何影响您网站的性能。您还可以定义预算并通过电子邮件和Slack获得提醒。达人的【三通】是小智继续分享的最大动力。本博客如有错误或建议，欢迎达人留言。最后谢谢大家的观看。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://blog.bitsrc.io/perfor...每周更新交流文章，微信搜索【大千世界】立即阅读，回复【福利】前端视频多等你，本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，欢迎Star。
