【前端面试之浏览器原理】浏览器渲染流程

一、浏览器的渲染流程

1. 使用html解析器将html页面转换成浏览器能够理解的DOM树，ParseHTML
2. 将css解析成浏览器能够识别的css 树
3. 样式计算
4. DOM树+CSS树–>布局树
5. 根据布局树生成了图层
6. 绘制（一个一个的绘制的）
7. 组合图层 生成最终的页面

有哪几种情况被叫做图层：

• css 3d

• position

• video

• cancas

• css3动画

  浏览器每次可以接收到多少数据：64kb
  假设一张图片145KB，那么需要传递几次数据呢？
  答：会传递三次数据
  如图所示：

二、重排和重绘

1、重排（回流）

当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程成为重排。

以下操作会导致回流：

• 页面的首次渲染
• 浏览器的窗口大小发生变化
• 元素的内容发生变化
• 元素的尺寸或者位置发生变化
• 激活CSS伪类
• 查询某些元素或者调用某些方法
• 元素的字体大小发生变化
• 添加或者删除可见的DOM元素
  

2、重绘

当页面中某些元素的样式发生变化，但不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制。

下面这些操作会导致重绘：

• color、background相关属性：background-color、background-image等
• outline相关属性：outline-color、outline-wdith、text-decoration
• border-radius、visibility、box-shadow
  

重排一定会触发重绘但是重绘不一定触发重排。

1. 尽量减少重绘还有重排
2. 将变化的元素作为一个单独的图层
3. 重排：layout
4. 重绘：paint