浏览器渲染进程的线程

浏览器渲染进程的线程

浏览器渲染进程主要负责网页的呈现和交互功能，每个标签页都有一个独立的渲染进程来负责其呈现。这种方式可以增强浏览器的稳定性，防止一个网页的崩溃引起整个浏览器的崩溃。当用户打开一个新的标签页或者输入一个URL时，浏览器会分配一个新的渲染进程来处理该页面的显示。

浏览器的渲染进程的线程总共有五种：

• GUI 渲染线程（Rendering Thread）
  负责渲染浏览器页面，解析 HTML、CSS，构建 DOM 树、构建 CSSOM 树、 构建渲染树和绘制页面；当界面需要重绘或由于某种操作引发回流时，该线程就会执行。

注意：GUI 渲染线程和 JS 引擎线程是互斥的，当 JS 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。

• JS 引擎线程 （JavaScript Engine Thread）
  JS 引擎线程也称为 JS 内核，负责处理 Javascript 脚本程序，解析 Javascript 脚本，运行代码。JS 引擎线程一直等待着任务队列中任务的到来，然后加以处理，一个 Tab 页中无论什么时候都只有一个 JS 引擎线程在运行 JS 程序。

注意：GUI 渲染线程与 JS 引擎线程的互斥关系，所以如果 JS 执行的 时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞。

• 事件触发线程（Event Thread）
  事件触发线程属于浏览器而不是 JS 引擎，负责处理JavaScript代码中的事件，用来控制事件循环。
  当 JS 引擎执行代码块如 setTimeOut 时（也可是来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件触发线程中；当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待 JS 引擎的处理。

注意：由于 JS 的单线程关系，所以这些待处理队列中的事件都得排 队等待 JS 引擎处理（当 JS 引擎空闲时才会去执行）；

• 定时器触发进程（Timer Thread）

定时器触发进程即 setInterval 与 setTimeout 所在线程。
浏览器定时计数器并不是由 JS 引擎计数的，因为 JS 引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确性；因此使用单独线程来计时并触发定时器，计时完毕后，添加到事件队列中，等待 JS 引擎空闲后执行，所以定时器中的任务在设定的时间点不一定能够准时执行， 定时器只是在指定时间点将任务添加到事件队列中。

注意：W3C 在 HTML 标准中规定，定时器的定时时间不能小于 4ms，如 果是小于 4ms，则默认为 4ms。

• 异步 http 请求线程 （XMLHttpRequest）

XMLHttpRequest 连接后通过浏览器新开一个线程请求。
检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将回调函数放入事件队列中，等待 JS引擎空闲后执行。