加餐三｜加载阶段性能：使用Audits来优化Web性能
李兵
该思维导图由 AI 生成，仅供参考
你好，我是李兵。
作为一名前端工程师，除了需要编写功能性的代码以外，我们还需要关注 Web 应用的性能问题，我们应该有能力让我们的 Web 应用占用最小的资源，并以最高性能运行，这也是前端工程师进阶的必要能力。既然性能这么重要，那么我们今天要来聊聊 Web 性能问题。
到底什么是 Web 性能?
Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。
因此，当我们讨论 Web 性能时，其实就是讨论 Web 应用速度，关于 Web 应用的速度，我们需要从两个阶段来考虑：
页面加载阶段；
页面交互阶段。
在本文中，我们会将焦点放到第一个阶段：页面加载阶段的性能，在下篇文章中，我们会来重点分析页面交互阶段的性能。
性能检测工具：Performance vs Audits
要想优化 Web 的性能，我们就需要有监控 Web 应用的性能数据，那怎么监控呢？
如果没有工具来模拟各种不同的场景并统计各种性能指标，那么定位 Web 应用的性能瓶颈将是一件非常困难的任务。幸好，Chrome 为我们提供了非常完善的性能检测工具：Performance 和 Audits，它们能够准确统计页面在加载阶段和运行阶段的一些核心数据，诸如任务执行记录、首屏展示花费的时长等，有了这些数据我们就能很容易定位到 Web 应用的性能瓶颈 。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了如何使用Chrome的Audits工具来评估和优化Web性能。首先强调了前端工程师需要关注页面加载阶段和页面交互阶段的性能，并对比了Performance和Audits两种性能检测工具，指出Audits相对简单易用，提供直观的性能数据和优化建议。文章指导读者如何利用Audits生成Web性能报告，并解读了报告中的性能指标、可优化项、手动诊断和运行时设置等部分。此外，还分析了Web应用在加载阶段的关键时间点和性能指标的含义，并提出了优化建议。通过本文，读者可以了解到如何利用Audits工具来评估网站的加载性能，并根据报告中的建议进行优化，从而提升用户体验效果。文章内容详实，适合前端工程师和Web开发者学习和应用。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《浏览器工作原理与实践》，新⼈⾸单¥59
《浏览器工作原理与实践》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(21)
- 最新
- 精选
莣孒老师，请问audits 一直生成不出报告是怎么回事呢作者回复: 要翻墙
2020-04-15516- 歌顿文中：我们先来分析下第一项指标 FP，如果 FP 时间过久，那么直接说明了一个问题，那就是页面的 HTML 文件可能由于网络原因导致加载时间过久，这块具体的分析过程你可以参考。 这里 FP 应该是 FCP 吧，FP 创建空白界面跟网络有关系吗？
作者回复: 也是有关系的，因为浏览器还需要根据HTTP响应头来判断要不要继续执行导航流程！
2019-12-1210 
Mr. Cheng终于等到这部分内容了，感谢老师作者回复: 这只是开胃菜，后面还有关于performance的硬菜
2019-12-055
空山鸟语老师，文中介绍了一些性能指标，比如fp fcp等，但是这些数据如何使用performance.timing里的数据，给统计出来呢？ 比如首屏时间，这个结束点在工具里很容易看到，但是如何拿到这个点的时间数据呢？作者回复: 浏览器统计的方式非常复杂，FP是通过GPU是否开始绘制来统计的，FCP又是在其它的地方统计的，源代码如何统计的细节我也没详细查看，不过这些数据你可以通过JS接口来获取到，具体你可以搜索"Paint Timing API"
2019-12-2022
70KAudits 是不是要翻墙才能用？作者回复: 嗯。要的
2019-12-122
卡尔原来 chrome v83.0.4103.61的Audits升级成Lighthouse了。2020-06-08176
许童童老师真的是太良心了，又回来给我们加餐了，感谢老师。2019-12-0428
空空Ryan老师文章中的“接下来继续执行 JavaScript 脚本，当首屏内容完全绘制完成时，我们把这个时间点称为 Largest Content Paint，简称 LCP”，但我在查资料时 LCP 指的是最大内容绘制的所需时间。最大内容和全部的内容绘制完成，这两者是一样的吗？2022-01-0624- james老师，我在chrome开发者工具中找不到Audits这面板2020-06-1322
ytd赞~2019-12-042
收起评论