浏览器渲染原理

最近看到一篇浏览器渲染的文章，读后笔记记下来。

浏览器的进程

• Browser进程

  • 主进程，协调用户的操作。主控子进程的管理，提供存储功能

• 渲染进程

  • 将HTML、css、js转换成我们的主页

• 网络进程

  • 网络资源的加载

• GPU进程

  • 解决性能问题

• 插件进程

  • 插件的运行
  • 插件容易崩溃，所以用这个进程来隔离

一个浏览器包含一个browser主进程、一个GPU进程、一个网络进程、多个渲染进程和多个插件进程。

多进程的好处

• 进程相互隔离，保证稳定性
• 不会被JS阻塞（当前渲染进程）整体浏览器其他页面的运行
• 插件进程和渲染进程在沙箱中，防止执行恶意程序

浏览器导航流程

• 用户输入

  • 用户输入URL，判断URL的规则，需要等待提交文档才会开始进入新的页面

• URL请求

• 准备渲染的过程

  • 如果AB同属于一个站点，会进行渲染的进程的复用

• 提交文档

  • 浏览器发送”提交文档“的信息给渲染进程。渲染进程收到后，会和网络进程简历传输数据的”管道“
  • 一旦开始传输，渲染进程开始渲染界面
  • 传输完毕，渲染进程发出”确定提交“的消息给浏览器进程，浏览器的一些数据更新：历史记录、缓存、存储等

• 渲染阶段

  • 一旦文档提交，渲染进程进行页面解析和子资源的加载，生成后，渲染进程会和浏览器进程进行同步，浏览器进程收到后，停止渲染动画，渲染结束，页面呈现

渲染流水线

• 渲染流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

• 构建DOM树

  • DOM树阶段会把HTML字节流转换成DOM 结构

• 样式计算

  • 将CSS转换为浏览器能够理解的结构

• 布局阶段

  • 将DOM可见元素计算出集合位置

• 分层

  • 针对特定的节点生成专用的图层，多个图层最终叠加成页面

• 图层绘制

  • 分层的每个图层进行绘制

• 栅格化/光栅化

  • 集合数据转换为最终的像素，显示在设备上

• 合成和显示

  • 提交给浏览器进程进行渲染

重排和重绘

• 重排/回流
  • 改变了浏览器布局的样式或者访问了offsetTop、scrollHeight属性，会造成layout的改变，从而会进行重排
• 重绘
  • 没有改变位置，只有样式阶段，只进行样式的重新绘制