浏览器工作原理与实践
李兵
前盛大创新院高级研究员
56402 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 46 讲
浏览器工作原理与实践
15
15
1.0x
00:00/00:00
登录|注册

加餐三|加载阶段性能:使用Audits来优化Web性能

Audits工具
Performance工具
根据性能报告优化Web性能
解读性能报告
生成性能报告
思考
Audits的使用
优化性能指标
运行时设置
手动诊断
可优化项
性能指标
生成报告
环境准备
配置工作环境
Performance vs Audits
Audits
总结
根据性能报告优化Web性能
解读性能报告
利用Audits生成Web性能报告
检测之前准备工作
性能检测工具
加载阶段性能
Web性能优化

该思维导图由 AI 生成,仅供参考

你好,我是李兵。
作为一名前端工程师,除了需要编写功能性的代码以外,我们还需要关注 Web 应用的性能问题,我们应该有能力让我们的 Web 应用占用最小的资源,并以最高性能运行,这也是前端工程师进阶的必要能力。既然性能这么重要,那么我们今天要来聊聊 Web 性能问题。

到底什么是 Web 性能?

我们看下 wiki 对 Web 性能的定义
Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。
因此,当我们讨论 Web 性能时,其实就是讨论 Web 应用速度,关于 Web 应用的速度,我们需要从两个阶段来考虑:
页面加载阶段;
页面交互阶段。
在本文中,我们会将焦点放到第一个阶段:页面加载阶段的性能,在下篇文章中,我们会来重点分析页面交互阶段的性能。

性能检测工具:Performance vs Audits

要想优化 Web 的性能,我们就需要有监控 Web 应用的性能数据,那怎么监控呢?
如果没有工具来模拟各种不同的场景并统计各种性能指标,那么定位 Web 应用的性能瓶颈将是一件非常困难的任务。幸好,Chrome 为我们提供了非常完善的性能检测工具:PerformanceAudits它们能够准确统计页面在加载阶段和运行阶段的一些核心数据,诸如任务执行记录、首屏展示花费的时长等,有了这些数据我们就能很容易定位到 Web 应用的性能瓶颈
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文详细介绍了如何使用Chrome的Audits工具来评估和优化Web性能。首先强调了前端工程师需要关注页面加载阶段和页面交互阶段的性能,并对比了Performance和Audits两种性能检测工具,指出Audits相对简单易用,提供直观的性能数据和优化建议。文章指导读者如何利用Audits生成Web性能报告,并解读了报告中的性能指标、可优化项、手动诊断和运行时设置等部分。此外,还分析了Web应用在加载阶段的关键时间点和性能指标的含义,并提出了优化建议。通过本文,读者可以了解到如何利用Audits工具来评估网站的加载性能,并根据报告中的建议进行优化,从而提升用户体验效果。文章内容详实,适合前端工程师和Web开发者学习和应用。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《浏览器工作原理与实践》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(21)

  • 最新
  • 精选
  • 莣孒
    老师,请问audits 一直生成不出报告是怎么回事呢

    作者回复: 要翻墙

    2020-04-15
    5
    16
  • 歌顿
    文中:我们先来分析下第一项指标 FP,如果 FP 时间过久,那么直接说明了一个问题,那就是页面的 HTML 文件可能由于网络原因导致加载时间过久,这块具体的分析过程你可以参考。 这里 FP 应该是 FCP 吧,FP 创建空白界面跟网络有关系吗?

    作者回复: 也是有关系的,因为浏览器还需要根据HTTP响应头来判断要不要继续执行导航流程!

    2019-12-12
    10
  • Mr. Cheng
    终于等到这部分内容了,感谢老师

    作者回复: 这只是开胃菜,后面还有关于performance的硬菜

    2019-12-05
    5
  • 空山鸟语
    老师,文中介绍了一些性能指标,比如fp fcp等,但是这些数据如何使用performance.timing里的数据,给统计出来呢? 比如首屏时间,这个结束点在工具里很容易看到,但是如何拿到这个点的时间数据呢?

    作者回复: 浏览器统计的方式非常复杂,FP是通过GPU是否开始绘制来统计的,FCP又是在其它的地方统计的,源代码如何统计的细节我也没详细查看,不过这些数据你可以通过JS接口来获取到,具体你可以搜索"Paint Timing API"

    2019-12-20
    2
    2
  • 70K
    Audits 是不是要翻墙才能用?

    作者回复: 嗯。要的

    2019-12-12
    2
  • 卡尔
    原来 chrome v83.0.4103.61的Audits升级成Lighthouse了。
    2020-06-08
    1
    76
  • 许童童
    老师真的是太良心了,又回来给我们加餐了,感谢老师。
    2019-12-04
    28
  • 空空Ryan
    老师文章中的“接下来继续执行 JavaScript 脚本,当首屏内容完全绘制完成时,我们把这个时间点称为 Largest Content Paint,简称 LCP”,但我在查资料时 LCP 指的是最大内容绘制的所需时间。最大内容和全部的内容绘制完成,这两者是一样的吗?
    2022-01-06
    2
    4
  • james
    老师,我在chrome开发者工具中找不到Audits这面板
    2020-06-13
    2
    2
  • ytd
    赞~
    2019-12-04
    2
收起评论
显示
设置
留言
21
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部