Skip to content

浏览器渲染原理

pengzhanbo

455字约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都解析 完成之后再去构建和布局渲染树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。