浏览器的渲染机制、回流和重绘

站长
· 阅读数 8
- 浏览器的渲染机制: 浏览器使用流式布局模型 浏览器会将 html 解析成 Dom 将 css 解析成 CSSDOM,然后将两者合并成 Render Tree 通过 render tree 将每一个节点按照给定的大小、位置、样式渲染到页面上 因为使用的流式布局,所以通常只对 render tree 遍历一次就行了(table除外,所以少用table)
- 回流和重绘的关系: 回流必将引起重绘,重绘不一定会引起回流。
回流:
- 当元素的尺寸、结构之类的属性发生改变的时候,浏览器会重新渲染部分或全部文档,这个过程称谓回流。
会引起回流的操作:
- 页面首次渲染
- 浏览器窗口大小改变
- 增删 dom 元素
- 更改元素大小、位置、字体大小
- 触发元素伪类例如: :hover
- (回流也叫重排,两个词都很形象,就像式平铺的一滩水,有个地方挖了个坑或者填了块土,导致地形发生改变,故称回流/重排)
重绘:
- 一些样式的属性发生变化但是不会影响页面的结构发生改变,被称为重绘。
会引起重绘的操作:
- 更改元素的颜色、背景颜色..
- (重绘,即重新绘制)