渲染进程中的线程

写在面前

上一章我们介绍了 浏览器架构 。介绍了现代浏览器的架构为多进程架构,它由浏览器主进程、GPU 进程、网络进程、音频进程、存储进程、多个渲染进程和多个插件进程组成(89.0.4389.90 版本 Chrome)。我们也说了线程的崩坏会导致页面(渲染进程)卡死,但不会影响其他页面。

那么渲染进程有什么组成?这个很重要,因为它是页面渲染、事件循环的基础。

一句话解释

渲染进程就是我们常说的浏览器内核,负责页面渲染,脚本执行,事件处理等,每个 tab 页就是一个渲染进程

渲染进程中包括 GUI 渲染线程、 JS 引擎线程、事件触发线程、网络异步线程、定时器线程

渲染进程内部包含主线程、工作线程、合成线程和光栅线程

由什么组成

GUI 渲染线程

  • 负责渲染浏览器界面,解析 HTML、CSS,构建 DOM 树和 RenderObject 树,布局和绘制等
  • 当界面需要重绘或由于某种操作引发回流时,该线程就会执行
  • 注意,GUI 渲染线程与 JS 引擎线程时互斥的,当 JS 引擎执行时 GUI 线程会被挂在,GUI 更新会被保存在一个队列中等待 JS 引擎空闲时立即被执行

JS 引擎线程

  • 也称为 JS 内核,负责处理 JavaScript 脚本程序(例如 V8 引擎)
  • 负责处理解析和执行 JavaScript 脚本程序
  • 只有一个 JS 引擎线程(单线程)
  • 与 GUI 渲染线程互斥,防止渲染结果不可预期

事件触发线程

  • 用来控制事件循环(鼠标点击、setTimeout、Ajax 等)
  • 当事件满足触发条件时,将事件放入到 JS 引擎所在的执行队列中
  • 归属于浏览器而不是JS引擎,用来控制事件循环

定时触发器线程

  • setTimeoutsetInterval所在的线程
  • 定时任务并不是由 JS 引擎计时的,是由定时触发线程来计时
  • 计时完毕后,通知事件触发线程

异步 HTTP 请求线程

  • 浏览器有一个单独的线程用于处理 AJAX 请求
  • 当请求完成时,若有回调函数,通知事件触发线程

为什么 GUI 渲染线程与 JS 引擎线程互斥

这是由于 JS 是可以操作 DOM 的,如果同时修改元素属性并同时渲染界面(即 JS 线程 和 UI 线程同时运行),那么渲染线程前后获得的元素就可能不一致了

参考资料

Last Updated:
Contributors: johan