21 | 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
《浏览器工作原理与实践》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(41)
- 最新
- 精选
杨越老师除了这个专栏还有其他专栏的计划吗？这个课干货很多，纯理论和纯代码是不给力的，老师你这种模式结合代码和理论很给力啊啊啊！作者回复: 目前没有，写完还要修订，答疑，补充。 这个专栏的后续事情还挺多
2019-09-2126
隔夜果酱没有使用cdn缓存静态资源,js/css/html等也没有进行压缩,一些ajax请求感觉可以合并.request.js可以换为wepack来打包.使用nginx之类的.作者回复: 很好，后面继续
2019-09-214- Geek_320111老师，今天讲的功能在工作中用得很多，performance还会详讲吗？这个不太会用。
作者回复: 关于performance，我是考虑等课程结束之后补充讲下，performance的确非常重要
2019-09-292 
前端队长12306官网的css没有压缩，TTFB耗时很多。。作者回复: 很好，继续
2019-09-211
wubinsheng强烈请求老师追加Performance面板的介绍。。。。2019-10-092116
mfist12306首页网站分析： 1. 传输方面：可以启用gzip压缩提高传输效率 2. js模块化方面：使用requirejs的前端模块化方案，可以使用webpack进行打包压缩，使用esModule方案，有利于浏览器优化 3. 缓存方面：全部使用的协商缓存，每次静态资源请求都会走到服务器进行验证，无疑增加服务器压力，可以考虑部分使用浏览器强缓存没设置过期时间 另外：感觉12306主要压力不在首页，在于大量的班次查询服务（如查询北京到上海的火车会直接生成新的页面进行响应），还有车位区间的算法的优化2019-09-2353
六个周这个专栏内的干货 我感觉能用半年时间去消化吸收。2019-12-01210
レイン小雨一直不太会用Audits这个面板。。。。。2019-09-2127
奕对于网络面板的每一个请求的 Timing 中 最上面出现了 Queued at 40.0 min Started at 40.0 min 这个是代表什么意思呢？2019-10-1335
-_-|||‘还有一些原因可能导致连接过程被推迟，这个推迟就表现在面板中的 Stalled 上，它表示停滞的意思’，还到底是哪些原因呢？比如说呢2019-12-093
收起评论