浏览器渲染机制

浏览器渲染机制

1. 浏览器先对得到的HTML进行解码，之后进行网络资源的预处理，将以后要发送的请求提前加进请求队列中。
2. 浏览器将HTML转化为一个个的标记（标记化Tokenization），之后通过标记来构建DOM树；CSS同理，先进行标记化，再进行CSS样式树的构建。
3. 浏览器将DOM树和CSS样式树结合，生成渲染树。
4. 布局：浏览器根据渲染树，获取每个渲染对象在屏幕上的位置和尺寸。
5. 绘制：将计算好的像素点绘制到屏幕。
6. 渲染层合成：多个绘制后的渲染层按照恰当的重叠顺序进行合并，而后生成位图，最终通过显卡展示到屏幕上。

回流/重排

当渲染对象的位置，尺寸，或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。

导致回流的操作：

1. 页面首次渲染

2. 元素位置或尺寸发生变化。

3. 添加或删除可见的DOM元素。

4. 浏览器窗口大小发生变化。

5. 查询某些属性或调用某些方法

   clientWidth、clientHeight、clientTop、clientLeft

   offsetWidth、offsetHeight、offsetTop、offsetLeft

   scrollWidth、scrollHeight、scrollTop、scrollLeft

   scrollIntoView()、scrollIntoViewIfNeeded()

   getComputedStyle()

   getBoundingClientRect()

   scrollTo()

重绘

样式的改变不改变渲染对象在文档流中的位置时（如：color, background-color的改变）浏览器重新绘制。

回流一定引发重绘，重绘不一定引发回流。回流比重绘的代价要更高。

优化

1. 浏览器会维护一定队列，所有引起回流或重绘的操作会放进这个队列，一定时间后会对这些操作进行批处理。

   但当访问clientWidth, clientHeight之类的属性时，会刷新这个队列，所以要尽量减少这些属性的访问

2. 浏览器使用的流式布局模型，避免使用table。

3. 对DOM元素进行修改时，可以先使用display: none使其脱离文档流，再进行DOM操作，执行完再放回文档流。

4. 对于复杂的动画效果，可以用display: position使其脱离文档流

5. 使用CSS3中的transform, opacity, filters属性，启动GPU加速，这些属性的改变不会引发回流或重绘。