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

21 | Chrome开发者工具:利用网络面板做性能分析

思考时间
优化时间线上耗时项
网络面板中的详细列表
网络面板
Chrome开发者工具
性能分析工具 Chrome开发者工具

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

“浏览器中的页面循环系统”模块我们已经介绍完了,循环系统是页面的基础,理解了循环系统能让我们从本质上更好地理解页面的工作方式,加深我们对一些前端概念的理解。
接下来我们就要进入新的模块了,也就是“浏览器中的页面”模块,正如专栏简介中所言,页面是浏览器的核心,浏览器中的所有功能点都是服务于页面的,而 Chrome 开发者工具又是工程师调试页面的核心工具,所以在这个模块的开篇,我想先带你来深入了解下 Chrome 开发者工具。
Chrome 开发者工具(简称 DevTools)是一组网页制作和调试的工具,内嵌于 Google Chrome 浏览器中。Chrome 开发者工具非常重要,所蕴含的内容也是非常多的,熟练使用它能让你更加深入地了解浏览器内部工作原理。(Chrome 开发者工具也在不停地迭代改进,如果你想使用最新版本,可以使用Chrome Canary。)
作为这一模块的第一篇文章,我们主要聚焦页面的源头网络数据的接收,这些发送和接收的数据都能体现在开发者工具的网络面板上。不过为了你能更好地理解和掌握,我们会先对 Chrome 开发者工具做一个大致的介绍,然后再深入剖析网络面板。

Chrome 开发者工具

Chrome 开发者工具有很多重要的面板,比如与性能相关的有网络面板、Performance 面板、内存面板等,与调试页面相关的有 Elements 面板、Sources 面板、Console 面板等。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入介绍了如何利用Chrome开发者工具的网络面板进行性能分析。文章首先讲解了浏览器中HTTP请求流程,然后重点分析了网络面板中的时间线,详细解释了各个阶段的含义和可能的优化方案。作者提到了排队时间过久、TTFB时间过久和Content Download时间过久可能的原因,并给出了针对性的解决方案。通过这些内容,读者可以快速了解网络面板的功能和性能分析的重要性,以及如何利用时间线面板进行性能优化。文章内容详实,适合开发者快速了解Chrome开发者工具的网络面板及其在性能分析中的应用。文章还留下了一个实际操作的题目,鼓励读者结合网络面板和Performance面板来分析Web应用的性能瓶颈。整体而言,本文为读者提供了深入的技术内容和实践性的操作指导,对于想要深入了解性能分析和优化的开发者来说是一篇有价值的文章。

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

全部留言(41)

  • 最新
  • 精选
  • 杨越
    老师除了这个专栏还有其他专栏的计划吗?这个课干货很多,纯理论和纯代码是不给力的,老师你这种模式结合代码和理论很给力啊啊啊!

    作者回复: 目前没有,写完还要修订,答疑,补充。 这个专栏的后续事情还挺多

    2019-09-21
    26
  • 隔夜果酱
    没有使用cdn缓存静态资源,js/css/html等也没有进行压缩,一些ajax请求感觉可以合并.request.js可以换为wepack来打包.使用nginx之类的.

    作者回复: 很好,后面继续

    2019-09-21
    4
  • Geek_320111
    老师,今天讲的功能在工作中用得很多,performance还会详讲吗?这个不太会用。

    作者回复: 关于performance,我是考虑等课程结束之后补充讲下,performance的确非常重要

    2019-09-29
    2
  • 前端队长
    12306官网的css没有压缩,TTFB耗时很多。。

    作者回复: 很好,继续

    2019-09-21
    1
  • wubinsheng
    强烈请求老师追加Performance面板的介绍。。。。
    2019-10-09
    2
    116
  • mfist
    12306首页网站分析: 1. 传输方面:可以启用gzip压缩提高传输效率 2. js模块化方面:使用requirejs的前端模块化方案,可以使用webpack进行打包压缩,使用esModule方案,有利于浏览器优化 3. 缓存方面:全部使用的协商缓存,每次静态资源请求都会走到服务器进行验证,无疑增加服务器压力,可以考虑部分使用浏览器强缓存没设置过期时间 另外:感觉12306主要压力不在首页,在于大量的班次查询服务(如查询北京到上海的火车会直接生成新的页面进行响应),还有车位区间的算法的优化
    2019-09-23
    53
  • 六个周
    这个专栏内的干货 我感觉能用半年时间去消化吸收。
    2019-12-01
    2
    10
  • レイン小雨
    一直不太会用Audits这个面板。。。。。
    2019-09-21
    2
    7
  • 对于网络面板的每一个请求的 Timing 中 最上面出现了 Queued at 40.0 min Started at 40.0 min 这个是代表什么意思呢?
    2019-10-13
    3
    5
  • -_-|||
    ‘还有一些原因可能导致连接过程被推迟,这个推迟就表现在面板中的 Stalled 上,它表示停滞的意思’,还到底是哪些原因呢?比如说呢
    2019-12-09
    3
收起评论
显示
设置
留言
41
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部