浏览器渲染网页的过程

核心：浏览器软件有渲染引擎

1.先将网页中的标签及标签之间的布局关系渲染成DOM树

2.将网页中的样式单独渲染成样式规则

3.根据DOM树和样式规则，生成渲染树（Render Tree)

4.根据生成的渲染树，得到节点的元素的位置（回流/重排）

5.根据生成的渲染树，将整个页面的标签样式部分进行渲染显示（文字颜色、背景颜色……）重绘

6.最后出现最终的页面效果

回流（重排）：如果页面中标签的结构、大小、位置、布局等发生了改变，那么浏览器就会重新渲染部分或全部文档，这个过程称为回流。

会导致回流的操作：

? ? ? ? 1.页面的首次刷新

? ? ? ? 2.浏览器的窗口大小发生变化

? ? ? ? 3.元素的大小或位置发生改变

? ? ? ? 4.改变字体的大小

? ? ? ? 5.内容的变化（如：图片的大小，input框的输入）

? ? ? ? 6.激活css伪类

? ? ? ? 7.脚本操作DOM（添加或者删除课件的DOM元素）

重绘：如果页面中的节点（元素）的样式的改变并不影响它在文档流中的位置和文档布局时（如：与颜色相关的部分发生了改变），那么浏览器就会进行重绘

注意：重绘不一定引起回流，但回流一起引起重绘。