共计 422 个字符，预计需要花费 2 分钟才能阅读完成。
- 浏览器的渲染机制：
浏览器应用流式布局模型
浏览器会将 html 解析成 Dom 将 css 解析成 CSSDOM，而后将两者合并成 Render Tree
通过 render tree 将每一个节点依照给定的大小、地位、款式渲染到页面上
因为应用的流式布局，所以通常只对 render tree 遍历一次就行了 (table 除外，所以少用 table)
- 回流和重绘的关系：
回流必将引起重绘，重绘不肯定会引起回流。
-
回流：
- 当元素的尺寸、构造之类的属性产生扭转的时候，浏览器会从新渲染局部或全副文档，这个过程称呼回流。
-
会引起回流的操作：
- 页面首次渲染
- 浏览器窗口大小扭转
- 增删 dom 元素
- 更改元素大小、地位、字体大小
- 触发元素伪类例如：:hover
- (回流也叫重排，两个词都很形象，就像式平铺的一滩水，有个中央挖了个坑或者填了块土，导致地形产生扭转，故称回流 / 重排)
-
重绘：
- 一些款式的属性发生变化然而不会影响页面的构造产生扭转，被称为重绘。
-
会引起重绘的操作：
- 更改元素的色彩、背景色彩..
- (重绘，即从新绘制)
正文完