浏览器的渲染以及回流和重绘

可能我们在面试的过程中经常被问到回流和重绘，但是想要真正搞懂他们之前，我们就要先了解一下浏览器渲染页面的过程。

一、浏览器渲染页面

（1）过程

1.解析html，生成一棵dom树。dom树中的节点与html中的每个标签是对应的

2.解析css生成一棵cssom树

注：在构建dom树的过程中可能会遇到js代码，阻塞dom树和cssom树，那就优先加载js代码，当js代码加载完毕后，在进行dom树和cssom树的渲染。

3.合并dom树和cssom树，生成一棵渲染树，渲染树代表的是一系列将要被渲染的对象。

4.将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting

（2）注意事项

接下来我们详细的说一下每个步骤有哪些注意事项吧

dom树

1.在构建dom树的时候，js代码可能会阻塞dom树的构建，上面已经提过了，在这里再提醒大家一下。

2.display:none的元素也会在dom树中

3.注释也会出现在dom树中

4.script标签也在dom树中

cssom树

1.在构建cssom树的时候，js代码可能会阻塞cssom树的构建，上面已经提过了，在这里再提醒大家一下。

2.可以一边解析cssom树一边解析dom树

构建渲染树

浏览器会从dom树的根节点开始遍历各个节点，让每一个节点能够找到适配的css样式

1.dispaly:none不存在渲染树中

2.visibility:hidden的元素在渲染树中

渲染树绘制

绘制是通过paint()方法进行实现，但是在绘制的前面还有一步就是浏览器的布局，是从渲染树的根节点开始遍历，确定各个节点的大小、位置，最终以一个盒子模型的方式布局完成。

在渲染树绘制的过程中可能会出现回流以及重绘，接下来就为大家详细介绍回流重绘。

二、回流和重绘

（1）定义

回流：当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生，例如当一个交互式站点更新后。其实就是当元素的尺寸、布局、隐藏等该表示，浏览器就会重新渲染部分dom或者全部dom。

重绘：当页面元素样式不影响元素在文档流中的位置时，如color，background-color，浏览器会将新的样式赋予元素并进行重新绘制。

（2）如何避免

在css中

1.避免多层设置内联样式

2.避免使用CSS表达式

3.当想要使用动画效果的时候尽量使元素脱离标准流

在js中

1.尽量把想要修改的样式，放入一个类中

2.避免频繁修改dom元素，尽量一次性修改完成

3.先隐藏元素，修改后再显示匀速，因为display：none属性不会引起回流、重绘、