浏览器专题

[zhuzhh]

浏览器多进程架构

进程：一个进程就是一个程序的运行实例 线程：线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率 线程是不能单独存在的，它是由进程来启动和管理的

浏览器采用了多进程，而多进程的特点是：

• 进程中的任意一线程执行出错，都会导致整个进程的崩溃。
• 线程之间共享进程中的数据。
• 当一个进程关闭之后，操作系统会回收进程所占用的内存。
• 进程之间的内容相互隔离。 如下图：

下面我们来逐个分析下这几个进程的功能。

• 浏览器进程： 主要负责界面显示，用户交互、子进程管理、提供存储等功能。
• 渲染进程： 核心任务是将html、css、js转换为网页，排版引擎Blink和js引擎V8都运行在该线程，默认情况下，chrome会为每个tab标签页创建一个渲染进程。出于安全考虑，渲染进程需要运行在沙箱模式下。
• UPU进程： GPU是为了实现3D css效果的，最初chrome发布的时候，还没该进程的，只是后来3D绘制越来越普遍，后来的chrome在其多进程架构引入了进来。
• 网络进程： 主要做网络资源的加载
• 插件进程： 负责运行插件，插件易崩溃，所以需要通过一个进程来单独隔离，这个当插件崩溃，就不会影响到；浏览器和页面 如果浏览器只开启了一个页面，则会启动至少四个进程，如下图，开了一个tab标签页：

打开浏览器任务管理器(shift + esc)

从上图可以看到，打开了一个页面，开启了浏览器进程、GPU进程、网络进程(network serivice)、渲染进程。如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。比如vue-devtools，有道词典等插件，这些插件也会启动

浏览器进程

从浏览器多进程架构图中可要看出，浏览器进程是控制各个进程交互的中心

渲染进程

• GUI渲染线程： 负责渲染浏览器界面,解析 HTML,CSS,构建 DOM 树和 RenderObject 树,布局和绘制等。 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。 GUI 渲染线程与 JS 引擎线程是互斥的,当 JS 引擎执行时 GUI 线程会被挂起（相当于被冻结了）,GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。
• JS引擎 负责解析 Javascript 脚本,运行代码 JS 引擎一直等待着任务队列中任务的到来,然后加以处理,一个 Tab 页（renderer 进程）中无论什么时候都只有一个 JS 线程在运行 JS 程序 GUI 渲染线程与 JS 引擎线程是互斥的, 所以如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。
• 事件触发线程 该线程是用来控制传说中的事件循环 根据html规范 - event loops

To coordinate events, user interaction, scripts, rendering, networking, and so forth, 
user agents must use event loops as described in this section. Each agent has an associated
 event loop, which is unique to that agent.
为了协调事件（event），用户交互（user interaction），脚本（script），渲染（rendering），网络
（networking）等，用户代理（user agent）必须使用事件循环（event loops）。

简单来说：

· 定时触发器线程 setInterval 与 setTimeout 所在线程 浏览器定时计数器并不是由 JavaScript 引擎计数的,（因为 JavaScript 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确） 因此通过单独线程来计时并触发定时（计时完毕后,添加到事件队列中,等待 JS 引擎空闲后执行） W3C 在 HTML 标准中规定,规定要求 setTimeout 中低于 4ms 的时间间隔算为 4ms。 但是经测试，发现有问题：

setTimeout(() => {
	console.log(2)
}, 2)
setTimeout(() => {
	console.log(1)
}, 1)
setTimeout(() => {
	console.log(0)
}, 0)
// 正常情况应该输出： 2 1 0
// 输出结果 1 0 2

mdn上说：

4 ms 是在 HTML5 spec 中精确的，并且在2010年及以后的跨浏览器中保持了一致，这个数值比 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)规定的嵌套函数的最小延时10ms更为精确。

规范和实现是有差距的，2ms比原来更接近规范 未被激活的tabs的定时最小延迟>=1000ms

参考资料

• Event Loop的规范和实现