浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
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?
浏览器工作原理与实践
登录|注册

01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程?

李兵 2019-08-05
无论你是想要设计高性能 Web 应用,还是要优化现有的 Web 应用,你都需要了解浏览器中的网络流程、页面渲染过程,JavaScript 执行流程,以及 Web 安全理论,而这些功能是分散在浏览器的各个功能组件中的,比较多、比较散,要怎样学习才能掌握呢?通过浏览器的多进程架构的学习,你就可以把这些分散的知识点串起来,组成一张网,从而让自己能站在更高的维度去理解 Web 应用。
因此,学习浏览器的多进程架构是很有必要的。需要说明的是,在本专栏中,我所有的分析都是基于 Chrome 浏览器的。那么多浏览器,为什么偏偏选择 Chrome 浏览器呢?因为 Chrome、微软的 Edge 以及国内的大部分主流浏览器,都是基于 Chromium 二次开发而来;而 Chrome 是 Google 的官方发行版,特性和 Chromium 基本一样,只存在一些产品层面差异;再加上 Chrome 是目前世界上使用率最高的浏览器,所以 Chrome 最具代表性
在开始之前,我们一起看下,Chrome 打开一个页面需要启动多少进程?你可以点击 Chrome 浏览器右上角的“选项”菜单,选择“更多工具”子菜单,点击“任务管理器”,这将打开 Chrome 的任务管理器的窗口,如下图:
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(132)

  • Geek_f7f72f
    即使是如今的多进程架构,我偶尔还会碰到一些由于单个页面卡死最终崩溃导致所有页面崩溃的情况,请问这是什么原因呢

    作者回复: 是这样的,通常情况下是一个页面使用一个进程,但是,有一种情况,叫"同一站点(same-site)",具体地讲,我们将“同一站点”定义为根域名(例如,geekbang.org)加上协议(例如,https:// 或者http://),还包含了该根域名下的所有子域名和不同的端口,比如下面这三个:

    https://time.geekbang.org
    https://www.geekbang.org
    https://www.geekbang.org:8080
    都是属于同一站点,因为它们的协议都是https,而根域名也都是geekbang.org。你也许了解同源策略,但是同一站点和同源策略还是存在一些不同地方,在这里你需要了解它们不是同一件事就行了。

    Chrome的默认策略是,每个标签对应一个渲染进程。但是如果从一个页面打开了新页面,而新页面和当前页面属于同一站点时,那么新页面会复用父页面的渲染进程。官方把这个默认策略叫process-per-site-instance。

    直白的讲,就是如果几个页面符合同一站点,那么他们将被分配到一个渲染进程里面去。

    所以,这种情况下,一个页面崩溃了,会导致同一站点的页面同时崩溃,因为他们使用了同一个渲染进程。

    为什么要让他们跑在一个进程里面呢?

    因为在一个渲染进程里面,他们就会共享JS的执行环境,也就是说A页面可以直接在B页面中执行脚本。因为是同一家的站点,所以是有这个需求的。

    2019-08-06
    5
    256
  • STAN_LIN
    虽然说 Google Chrome/Chromium 的市占率以及代表性都最为突出,但仍然十分希望在讲解 Chrome 各种功能的实现时能够穿插讲解/对比 Mozilla Firefox,尤其是 Firefox Quantum。

    毕竟 Google Chrome 也不一定全部都是 best practices 以及此专栏主题为《浏览器工作原理与实践》而非《Chrome 工作原理与实践》不是?

    一名 Mozilla Firefox Nightly 用户留。

    作者回复: 这个建议很好,后续课程我考虑按照你这个思路来规划下。

    2019-08-05
    52
  • 空间
    感觉挺好奇的,单进程浏览器开多个页面,渲染线程也只有一个吗?感觉一个页面开一个线程不是更合理吗?

    作者回复: 之前回答的有点笼统,下面是我整理过后的回答:

    首先这个问题提的很好,我们从IE6开始讲起,IE6时代,浏览器是单进程的,所有页面也都是运行在一个主线程中的,当时IE6就是这样设计,而且此时的IE6是单标签,也就是说一个页面一个窗口。

    这时候,国内有很多国产浏览器,都是基于IE6来二次开发的,而IE6原生架构就是所有页面跑在单线程里面的,意味着,所有的页面都共享着同一套JavaScript运行环境,同样,对于存储Cookie也都是在一个线程里面操作的。
    而且这些国产浏览器由于需要,都采用多标签的形式,所以其中的一个标签页面的卡顿都会影响到整个浏览器。

    基于卡顿的原因,国内浏览器就开始尝试支持页面多线程,也就是让部分页面运行在单独的线程之中,运行在单独的线程之中,意味着每个线程拥有单独的JavaScript执行环境,和Cookie环境,这时候问题就来了:
    比如A站点页面登陆一个网站,保存了一些Cookie数据到磁盘上,再在当前线程环境中保存部分Session数据,由于Session是不需要保存到硬盘上的,所以Session只会保存在当前的线程环境中。这时候再打开另外一个A站点的页面,假设这个页面在另外一个线程中里面,那么它首先读取硬盘上的Cookie信息,但是,由于Session信息是保存在另外一个线程里面的,无法直接读取,这样就要实现一个Session同步的问题,由于IE并没有源代码,所以实现起来非常空难,国内浏览器花了好长一点时间才解决这个问题的。

    Session问题解决了,但是假死的问题依然有,因为进程内使用了一个窗口,这个窗口是依附到浏览器主窗口之上的,所以他们公用一套消息循环机制,消息循环我们后面会详细地讲,这也就意味这一个窗口如果卡死了。也会导致整个浏览器的卡死。

    国产浏览器又出了一招,就是把页面做成一个单独的弹窗,如果这个页面卡死了,就把这个弹窗给隐藏掉。

    这里还要提一下为什么Chrome中的一个页面假死不会影响到主窗口呢?
    这是因为chrome输出的实际上图片,然后浏览器端把图片贴到自己的窗口上去,在Chrome的渲染进程内,并没有一个渲染窗口,输出的只是图片,如果卡住了,顶多图片不更新了。

    国产浏览器这一套技术花了四五年时间,等这套技术差不多成熟时,Chrome发布了 :(

    2019-08-06
    9
    42
  • Artyhacker
    在专栏之外,老师能否提供一些学习浏览器原理的途径?作为前端开发,很早就想好好研究一下浏览器,但除了一些零散的泛泛的博客文章,一直没有找到一个系统的学习方式。

    作者回复: 关于参考资料,我先整理下,回头完整发出来

    2019-08-07
    27
  • lacaja
    老师好,我有个疑问,Chrome排版引擎现在是blink,这一点从哪里可以看到呢?我在76版本Chrome的navigator属性值里只看到了AppleWebkit,不理解这是为什么?

    作者回复: 你说的是UserAgent,又称为UA,UA是浏览器的身份证,通常,在发送HTTP请求时,UA会附带在HTTP的请求头中user-agent字段中,这样服务器就会知道浏览器的基础信息,然后服务器会根据不同的UA返回不同的页面内容,比如手机上返回手机的样式,PC就返回PC的样式。

    你也可以在浏览器的控制台中输入:
    navigator.userAgent
    来查看当前浏览器的UA信息。

    FireFox中的打印的信息是:
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:68.0) Gecko/20100101 Firefox/68.0"

    Chrome中打印的信息是:
    "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Mobile Safari/537.36"

    安卓系统中的Chrome浏览器:
    "Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Mobile Safari/537.36"


    我们知道了服务器会根据不同的UA来针性的设计不同页面,所以当出了一款新浏览器时,他如果使用自己独一无二的UA,那么之前的很多服务器还需要针对他来做页面适配,这显然是不可能的,比如Chrome发布时他会在他的UA中使用“Mozilla” ,“AppleWebKit”,等关键字段,用来表示他同时支持Mozilla和AppleWebKit,然后再在最后加上他自己的标示,如Chrome/xxx。

    这就解释了为什么你查看的信息中含有WebKit字样。

    2019-08-08
    21
  • nissan
    请问老师,如果打开了 2个页面,会有几个进程呢?是 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 2个渲染进程,共 5个吗?这些进程是可以在浏览器开发者中被实际观察到的吗?

    作者回复: 通常情况下会是五个,但是有很多其他情况:
    1:如果页面里有iframe的话,iframe也会运行在单独的进程中!
    2:如果页面里有插件,同样插件也需要开启一个单独的进程!
    3:如果你装了扩展的话,扩展也会占用进程
    4:如果2个页面属于同一站点的话,并且从a页面中打开的b页面,那么他们会公用一个渲染进程

    这些进程都可以通过chrome的任务管理器来查看。

    2019-08-06
    4
    21
  • Michael Cheng
    一个角度来说,最大动力就是chrome的出现。曾经的IE像极了诺基亚,chrome就像是横空出世的iPhone ,当着IE的面告诉IE,浏览器应该这么玩儿。
    另一个角度也是互联网的发展需要,人们所需要的不再是只是简单展示个页面的浏览器,需要有复杂的交互,浏览器应该能做更多的事情,这对浏览器的稳定性、以及性能都有了新的要求。所以出来一个性能符合要求的浏览器也是必须的。
    还有就是11年后相对规范的es5的出现,再之后es6.7,web能做的事情越来越多了,web工程化,再后来node的出现,前端体系越来越庞大,

    作者回复: 👍

    2019-08-05
    15
  • 许童童
    老师讲得好,我这里放一下自己的总结。
    早期浏览器:
    不稳定(单独进程)
    不流畅(单独进程)
    不安全(沙箱)

    早期多进程架构:
    主进程 渲染进程 插件进程

    现代多进程架构:
    主进程 渲染进程 插件进程 GPU进程 网络进程

    未来:
    面向服务架构

    作者回复: 总结的很好👍

    2019-08-06
    10
  • Oditto
    对于浏览器中的页面崩溃的原因该怎么定位呢?很多情况下,问题并不能稳定复现,通过浏览器自带的开发者工具感觉很难定位到真正的问题

    作者回复: 要定位页面崩溃页面,我们先要了解下有可能造成页面崩溃的因素,根据我的实际统计数据看来,主要有以下三个方便的因素:
    首先,主要因素是一些第三方插件注入浏览器或者页面进程,拦截了网页的一些正常操作而导致页面或者浏览器崩溃,如一些杀毒软件,或者卫士类软件,或者一些流量劫持软件。
    第二个因素是插件,虽然容易崩溃,但是通常情况下只会影响到自身的进程,不过我们以前的统计数据来看,也会小概率地影响到页面的崩溃,不过整体数据来看还好了。另外一个方向来看,插件的使用率已经越来越低了,所以插件不是个大问题。
    第三个因素是浏览器的一些bug,如渲染引擎,JavaScript引擎等,不过从统计数据来看,这类因素导致的崩溃也是越来越低的了,而且随着浏览器的更新升级,引起问题的因素也是在不断变化的。

    所以要直接给出页面崩溃原因是很难的,而且直接从JS的层面来看,也是很难跟踪崩溃原因的。
    提一个我之前使用的方法,那就是使用JS来统计页面是否崩溃,这类统计不是100%准备,但是可以通过数据来大致判断页面是否崩溃,然后再找一些典型的用户环境来实地排查。

    2019-08-05
    2
    10
  • Brave
    必须订阅了,首先课程讲的好,听的明白,前置技能和概念也都扫盲了,相信即便0基础也能上手,订阅了20多个课程,看了老师耐心的几个长篇回复,必须点赞,目前刚好对这方面知识有兴趣,学习一下做个储备

    作者回复: 感谢

    2019-08-07
    1
    9
  • 为什么websql被逐渐抛弃了而使用了Indexdb?

    作者回复: 我觉得就是一帮大佬没谈妥

    2019-08-05
    1
    7
  • 元斌
    浏览器发展先是标准的发展,然后再是支持标准,可以让需求先统一的提出来,开放的基因,开放的生态,超前的设计理念。还有一个我认为比较重要的一点,计算机性能的发展能比较直接的提升浏览器的体验,从而促进浏览器进一步的发展。

    作者回复: 其实,很多标准并不是先制定的,而且先产品化,得到广泛的认可之后,再形成标准, 如spdy协议。

    世上本无路,走的人多了便有了路。

    2019-08-05
    6
  • Y s.
    所有的iframe标签都会创建一个新的渲染进程吗?

    作者回复: iframe没有单独标签,是潜入在其它页面里面的,比如一个页面嵌入了三个不同域名的iframe,那么这个页面就会拥有四个渲染进程

    2019-08-07
    1
    5
  • Fortune
    老师后面有讲浏览器是如何运行js的吗?本人后台,但是每次大佬用js封装好的方法,想扩展的好头疼,看源码

    作者回复: 会讲JS的执行流水线,这点对于理解JS中一些概念很有帮助。

    2019-08-05
    5
  • 不矫情不做作那是我
    讲的很清楚,有点豁然开朗的感觉,必须点个赞
    2019-08-05
    5
  • Geek_8476da
    老师为什么我这多了一个v8代理解析工具

    作者回复:
    Chrome支持使用JavaScript来写连接代理服务器脚本,又称为在线pac代理脚本,pac脚本具体什么样子你可以搜索“PAC代理脚本”,总之使用pac代理脚本可以实现一些那啥的事。

    刚开始的时候啊,Chrome是在浏览器进程里面解析pac代理脚本的,由于是JavaScript脚本,所有需要在浏览器进程里面引入V8,不过把V8运行在浏览器进程似乎不太好,于是Chrome团队后来就把这个功能独立出来一个进程了,这个进程就叫着“Utility: V8 Proxy Resolver”。

    英文好的话可以看他们提供的官方文档:https://docs.google.com/document/d/1n5hr4KJhZl2A4MicTfmyiHPdiKp7kmUoWXnRBN8SrZE/edit#

    2019-08-13
    1
    4
  • tick
    老师您好,你说的blink是Chrome是排版引擎,然后又说是渲染引擎,这里的排版和渲染是什么关系?
    2019-08-13
    4
  • Rocky
    为什么单进程浏览器当时不可以采用安全沙箱?

    作者回复: 如果一个进程使用了安全沙箱之后,该进程对于操作系统的权限就会受到限制,比如不能对一些位置的文件进行读写操作,而这些权限浏览器主进程所需要的,所以安全沙箱是不能应用到浏览器主进程之上的。

    2019-08-06
    4
  • 0.618
    我认为,推动浏览器发展的动力主要是人们对性能速度的永恒追求。而要最大限度的提升速度最好的办法就是引入并行、多任务的概念。从而也就出现了多进程的浏览器架构,在性能速度的基础上人们还会追求安全性、稳定性等目标。从而有了沙箱机制、进程隔离等概念的出现。从总体上来讲,这种多进程架构也是符合“单一职责”的原则,一个进程专门负责一件事,逻辑清晰,易扩展等。
    2019-08-20
    3
  • 未来系统之父
    老哥快点讲啊,课程都买了 才发现只有三课,不讲 关小黑屋哈

    作者回复: 吓得我赶紧加快进度

    2019-08-08
    1
    3
收起评论
99+
返回
顶部