浏览器渲染原理

120 阅读1分钟
  1. 解析收到文档,根据文档定义一颗DOM树DOM树是由DOM元素及属性节点组成
  2. 对css进行解析,生成CSSOM规则树
  3. 根据DOM树和CSSOM树构建Render Tree,渲染节点被称作为渲染对象,渲染对象是一个包含颜色和大小等属性的矩形,渲染对象和DOM对象相对应,但不是一一对应,不可见的DOM元素不会被插入渲染树
  4. 当渲染对象被创建和插入渲染树中,它们并没有位置和大小,所以当浏览器生成渲染树后,就会根据渲染树进行布局(回流)。这一阶段浏览器做的事情就是各个节点在页面中的确切位置和大小,通常这一行为也被称为“自动重排”
  5. 布局阶段结束后是绘制阶段,渲染树并显示在屏幕上

为了更好的用户体验渲染引擎会尽可能早的将内容呈现到屏幕上,并不会等到所有的html解析完成后再去构建和布局render tree。它是解析完成一部分内容就显示一部分内容,同时下载其余内容