鹏展博

外观

浏览器渲染原理

复制页面

约 453 字大约 2 分钟

2022-04-13

提问

  1. 说说 浏览器的渲染原理

  1. 解析收到的文档， 根据文档定义构建一棵 DOM 树， DOM 树是由DOM元素及属性节点组成的。

  2. 对CSS进行解析，生成 CSSOM（CSS Object Model） 规则树。

  3. 根据DOM树和CSSOM规则树构建 渲染树。 渲染树的节点被称为渲染对象，渲染对象是一个包含颜色和大小等属性的矩形， 渲染对象和DOM元素相对应，但并非一对一的对应关系，不可见的DOM元素不会被插入渲染树。 还有一些元素对应几个可见对象，它们一般是具有复杂结构的元素，无法用一个矩形来描述。

  4. 当渲染对象被创建并添加到渲染树中，它们并没有位置和大小，所以当浏览器生成渲染树以后， 就会根据渲染树来进行布局（也可以叫回流）。这一阶段浏览器要做的事情是确定各个节点在页面中的位置和大小。 通常这个行为也被称为自动重排。

  5. 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上， 绘制使用UI基础组件。

这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等所有的html都解析 完成之后再去构建和布局渲染树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。