浏览器渲染原理&&重绘和回流

浏览器渲染原理

浏览器向服务器请求到了HTML文档后便开始解析，产物是DOM（文档对象模型），如果有css，会根据css生成CSSOM（CSS对象模型），然后再由DOM和CSSOM合并产生渲染树，有了渲染树，知道了所有节点的样式，便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局。最后把节点绘制到浏览器上。

• css的加载和解析不会阻塞html文档的解析
• css的解析会阻塞js的执行，必须等到CSSOM生成后才能执行js
• js的执行会阻塞html文档的解析
• html一边解析一边显示
• css必须完全解析完毕才能进入生成渲染树环节

创建DOM树—创建CSSOM树—执行脚本—生成渲染树—生成布局—绘制

重绘

当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。

回流

当改变的操作响应文档内容或者结构，或者元素位置时，就会触发回流。有以下几种情况：

• DOM操作（对元素的增删改、顺序变化等）
• 内容变化，包括表单区域内的文本变化
• css属性的更改或者重新计算
• 增删样式表内容
• 修改class属性
• 浏览器窗口变化（滚动或缩放）
• 伪类样式激活（：hover等）

浏览器优化渲染

浏览器本身能够进行优化，尽可能减少重绘和回流。
一个position为absolute或fixed的元素更改，只会影响本身及子元素，而static元素则会影响后面所有元素。
JavaScript执行时，浏览器会缓存所有变化，然后一次性全部绘制。（读取元素属性会引起强制回流）。

我们可以进行的优化：
样式表放在head标签中，脚本放在body结束前。
简化并优化css选择器。（选择器是从右到左匹配）
DOM节点保存在一个变量中，避免重复获取。
修改元素样式时，更改其class属性更好。