浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
6167 人已学习
课程目录
已完结 42 讲
0/4登录后,你可以任选4讲全文学习。
开篇词 (1讲)
开篇词 | 参透了浏览器的工作原理,你就能解决80%的前端难题
免费
宏观视角下的浏览器 (6讲)
01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程?
02 | TCP协议:如何保证页面文件能被完整送达浏览器?
03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?
04 | 导航流程:从输入URL到页面展示,这中间发生了什么?
05 | 渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?
06 | 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?
浏览器中的JavaScript执行机制 (5讲)
07 | 变量提升:JavaScript代码是按顺序执行的吗?
08 | 调用栈:为什么JavaScript代码会出现栈溢出?
09 | 块级作用域:var缺陷以及为什么要引入let和const?
10 | 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
11 | this:从JavaScript执行上下文的视角讲清楚this
V8工作原理 (3讲)
12 | 栈空间和堆空间:数据是如何存储的?
13 | 垃圾回收:垃圾数据是如何自动回收的?
14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?
浏览器中的页面循环系统 (6讲)
15 | 消息队列和事件循环:页面是怎么“活”起来的?
16 | WebAPI:setTimeout是如何实现的?
17 | WebAPI:XMLHttpRequest是怎么实现的?
18 | 宏任务和微任务:不是所有任务都是一个待遇
19 | Promise:使用Promise,告别回调函数
20 | async/await:使用同步的方式去写异步代码
浏览器中的页面 (8讲)
21 | Chrome开发者工具:利用网络面板做性能分析
22 | DOM树:JavaScript是如何影响DOM树构建的?
23 | 渲染流水线:CSS如何影响首次加载时的白屏时间?
24 | 分层和合成机制:为什么CSS动画比JavaScript高效?
25 | 页面性能:如何系统地优化页面?
26 | 虚拟DOM:虚拟DOM和实际的DOM有何不同?
27 | 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题?
28 | WebComponent:像搭积木一样构建Web应用
浏览器中的网络 (3讲)
29 | HTTP/1:HTTP性能优化
30|HTTP/2:如何提升网络速度?
31|HTTP/3:甩掉TCP、TLS 的包袱,构建高效网络
浏览器安全 (5讲)
32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源?
33 | 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?
34 | CSRF攻击:陌生链接不要随便点
35 | 安全沙箱:页面和系统之间的隔离墙
36 | HTTPS:让数据传输更安全
结束语 (1讲)
结束语 | 大道至简
课外加餐 (4讲)
加餐一|浏览上下文组:如何计算Chrome中渲染进程的个数?
加餐二|任务调度:有了setTimeOut,为什么还要使用rAF?
加餐三|加载阶段性能:使用Audits来优化Web性能
加餐四|页面性能工具:如何使用Performance?
浏览器工作原理与实践
登录|注册

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

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

Chrome 开发者工具

Chrome 开发者工具有很多重要的面板,比如与性能相关的有网络面板、Performance 面板、内存面板等,与调试页面相关的有 Elements 面板、Sources 面板、Console 面板等。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(27)

  • wubinsheng
    强烈请求老师追加Performance面板的介绍。。。。
    2019-10-09
    11
  • 没带就是没写
    老师除了这个专栏还有其他专栏的计划吗?这个课干货很多,纯理论和纯代码是不给力的,老师你这种模式结合代码和理论很给力啊啊啊!

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

    2019-09-21
    9
  • mfist
    12306首页网站分析:
    1. 传输方面:可以启用gzip压缩提高传输效率
    2. js模块化方面:使用requirejs的前端模块化方案,可以使用webpack进行打包压缩,使用esModule方案,有利于浏览器优化
    3. 缓存方面:全部使用的协商缓存,每次静态资源请求都会走到服务器进行验证,无疑增加服务器压力,可以考虑部分使用浏览器强缓存没设置过期时间
    另外:感觉12306主要压力不在首页,在于大量的班次查询服务(如查询北京到上海的火车会直接生成新的页面进行响应),还有车位区间的算法的优化
    2019-09-23
    2
  • 隔夜果酱
    没有使用cdn缓存静态资源,js/css/html等也没有进行压缩,一些ajax请求感觉可以合并.request.js可以换为wepack来打包.使用nginx之类的.

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

    2019-09-21
    2
  • レイン小雨
    一直不太会用Audits这个面板。。。。。
    2019-09-21
    2
  • Cris
    优先级低的会给优先级高的让路,浏览器是怎么实现让路的?求老师指教
    2019-10-14
    1
    1
  • 一步
    对于网络面板的每一个请求的 Timing 中
    最上面出现了
    Queued at 40.0 min
    Started at 40.0 min
    这个是代表什么意思呢?
    2019-10-13
    1
  • Boogie 捷
    自己学着用performance看了下,主线程一共花了13s才fire on load event,期间大概10s 线程都是idle的。看了下idle期间的network,两个png下载了大概3s,jquery.min.js 也下载了大概1.5s。感觉应该用cdn 加速 asset loading 的时间. 希望老师还是可以结合一下例子讲一下performace tool。
    2019-10-02
    2
    1
  • Geek_320111
    老师,今天讲的功能在工作中用得很多,performance还会详讲吗?这个不太会用。

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

    2019-09-29
    1
  • Angus
    关于DOMContentLoaded和load事件的区别,一直都有些疑问,老师这里能不能解释的清楚一些,我认为这两个事件对后续Performance性能分析时会有所帮助。以下是我理解的
    DOMContentLoaded:HTML文档加载完毕,内外链同步JS代码执行完毕之后触发
    load:DOM结构中的JS/CSS/图片以及异步加载的JS/CSS/图片加载完成之后出发,video/audio/flash不会影响load事件的触发
    2019-09-23
    1
  • Will
    老师可以解释一下这句话的意思吗?
    网络进程在为数据分配磁盘空间时,新的HTTP请求也需要短暂的等待磁盘分配结束。
    2019-09-23
    2
    1
  • Daotin
    12306官网的css没有压缩,TTFB耗时很多。。

    作者回复: 很好,继续

    2019-09-21
    1
  • -_-_aaa
    ‘还有一些原因可能导致连接过程被推迟,这个推迟就表现在面板中的 Stalled 上,它表示停滞的意思’,还到底是哪些原因呢?比如说呢
    2019-12-09
  • -_-_aaa
    'DOMContentLoaded,这个事件发生后,.......CSS 文件都已经下载完成了。Load,说明浏览器已经加载了所有的资源(图像、样式表等)。',CSS文件难道不是样式表吗?应该在DOMContentLoaded事件触发时完成。
    2019-12-09
  • A6六个周
    这个专栏内的干货 我感觉能用半年时间去消化吸收。
    2019-12-01
  • 风一样的浪漫
    本以为这章会有Performance
    曾经查过很多Performance的资料,感觉都不对
    只能试着去啃纯英文了
    2019-10-22
  • 风一样的浪漫
    看到这章的时候超期待Performance,哈哈
    2019-10-22
  • 曹慧琳
    老师,我想问个问题,上传文件的请求为什么在network的response里面看不到后端的返回值
    2019-10-17
    1
  • Cris
    css文件和样式表文件是一个意思吗?
    2019-10-16
  • aprilday
    想提问一下我在实际开发中遇到的和这节有关的问题,就是 二阶段 Stalled这一步耗时巨长,这个最可能和什么相关呢。
    2019-10-15
收起评论
27
返回
顶部