浏览器

[Ben-yby]

浏览器的进程

• 浏览器进程 (Browser Process)：负责浏览器的TAB的前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作，比如网络请求和文件访问。
• 渲染进程 (Renderer Process)：负责一个Tab内的显示相关的工作，也称渲染引擎。
• 插件进程 (Plugin Process)：负责控制网页使用到的插件
• GPU进程 (GPU Process)：负责处理整个应用程序的GPU任务

浏览器进程间的关系

• 当我们是要浏览一个网页，我们会在浏览器的地址栏里输入URL，这个时候浏览器进程会向这个URL发送请求，获取这个URL的HTML内容，
• 然后将HTML交给渲染进程，渲染进程解析HTML内容，解析遇到需要请求网络的资源又返回来交给浏览器进程进行加载，
• 同时通浏览器进程，需要插件进程加载插件资源，执行插件代码。
• 解析完成后，渲染进程计算得到图像帧，并将这些图像帧交给GPU进程，GPU进程将其转化为图像显示屏幕。

浏览器内核的线程

浏览器内核，即渲染进程下面拥有着多个线程，靠着这些现成共同完成渲染任务：

1. 图形用户界面GUI渲染线程

• 负责渲染浏览器界面，包括解析HTML、CSS、构建DOM树、Render树、布局与绘制等
• 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行

2. JS引擎线程

• JS内核，也称JS引擎，负责处理执行javascript脚本
• 等待任务队列的任务的到来，然后加以处理，渲染进程无论什么时候都只有一个JS引擎在运行JS程序

3. 事件触发线程

• 听起来像JS的执行，但是其实归属于浏览器，而不是JS引擎，用来控制时间循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
• 当JS引擎执行代码块如setTimeout时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
• 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
• 注意：由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

4. 定时触发器线程

• setInterval与setTimeout所在线程
• 定时计时器并不是由JS引擎计时的，因为如果JS引擎是单线程的，如果JS引擎处于堵塞状态，那会影响到计时的准确
• 当计时完成被触发，事件会被添加到事件队列，等待JS引擎空闲了执行
• 注意：W3C的HTML标准中规定，setTimeout中低与4ms的时间间隔算为4ms

5. 异步HTTP请求线程

• 在XMLHttpRequest在连接后新启动的一个线程
• 线程如果检测到请求的状态变更，如果设置有回调函数，该线程会把回调函数添加到事件队列，同理，等待JS引擎空闲了执行

浏览器内核中线程之间的关系

GUI渲染线程与JS引擎线程互斥

• 因为JS引擎可以修改DOM树，那么如果JS引擎在执行修改了DOM结构的同时，GUI线程也在渲染页面，那么这样就会导致渲染线程获取的DOM的元素信息可能与JS引擎操作DOM后的结果不一致。
• 为了防止这种现象，GUI线程与JS线程需要设计为互斥关系，当JS引擎执行的时候，GUI线程需要被冻结，但是GUI的渲染会被保存在一个队列当中，等待JS引擎空闲的时候执行渲染。
• 由此也可以推出，如果JS引擎正在进行CPU密集型计算，那么JS引擎将会阻塞，长时间不空闲，导致渲染进程一直不能执行渲染，页面就会看起来卡顿卡顿的，渲染不连贯，所以，要尽量避免JS执行时间过长。

JS引擎线程与事件触发线程、定时触发器线程、异步HTTP请求线程

• 事件触发线程、定时触发器线程、异步HTTP请求线程三个线程有一个共同点，那就是使用回调函数的形式，当满足了特定的条件，这些回调函数会被执行。
• 这些回调函数被浏览器内核理解成事件，在浏览器内核中拥有一个事件队列，这三个线程当满足了内部特定的条件，会将这些回调函数添加到事件队列中，等待JS引擎空闲执行。
• 例如异步HTTP请求线程，线程如果检测到请求的状态变更，如果设置有回调函数，回调函数会被添加事件队列中，等待JS引擎空闲了执行。
• 但是，JS引擎对事件队列（宏任务）与JS引擎内的任务（微任务）执行存在着先后循序，当每执行完一个事件队列的时间，JS引擎会检测内部是否有未执行的任务，如果有，将会优先执行（微任务）。

浏览器渲染原理

浅谈浏览器多进程与JS线程