浏览器多进程架构

浏览器进程
渲染进程
插件进程
GPU进程

多进程架构优化

Chrome 浏览器使用 Process-per-site-instance (default) - 同一个 site-instance 使用一个进程
即： 同一个在一个浏览器中，使用 window.open 或者 <a href="/c.html" target="_black"></a> 为一个进程

网页渲染原理

渲染进程中，包含线程分别是：

  • 一个主线程（main thread）
  • 多个工作线程（work thread）
  • 一个合成器线程（compositor thread）
  • 多个光栅化线程（raster thread）

Html 加载
1.JavaScript的下载与执行
2.css 计算 computed style

  1. 处理HTML标签构建DOM树。
  2. 处理CSS标签构建CSSOM树。
  3. DOM和CSSOM树被组合形成渲染树 render tree （渲染树只包含需要显示在页面的节点）。
  4. Layout（reflow）计算每个对象的确切位置和大小。
  5. 最后是绘制（Paint），把最终的渲染树对象渲染成屏幕像素。

-> 1.2 两步生成 render tree （包含每个元素的页面坐标信息及盒子模型大小的布局树）
-> layout 过程生成 Layout 树 （知道每一个节点在页面上的位置）
-> Paint 生成 Paint Record
-> 合成(将前面几步收集的信息转化为显示器中的像素)
-> 分成不同层级的 Layer 树
-> 合成器线程开始对层级树的每一层进行光栅化，如果太大需要切分之后再光栅化
-> 光栅化
-> 构建一个合成帧（compositor frame）

合成的好处在于这个过程没有涉及到主线程，所以合成线程不需要等待样式的计算以及JavaScript完成执行

由于事件绑定而对于非快速滚动区域的标记，开发者需要注意全局事件的绑定，比如我们使用事件委托，将目标元素的事件交给根元素body进行处理

  1. document.body.addEventListener('touchstart',
  2. event => {
  3.     if (event.target === area) {
  4.         event.preventDefault()
  5.     }
  6.  }, {passive: true});   // passive 参数可以既绑定事件，又可以直接合成帧而不阻碍主线程

优化
对于连续事件 使用 requestAnimationFrame

Layout 找到所有元素的几何关系的过程。
主线程会遍历DOM 及相关元素的计算样式，构建出包含每个元素的页面坐标信息及盒子模型大小的布局树（Render Tree）