你了解重排和重绘吗

在讲解重排重绘之前先了解一下前置知识点：

        当输入一个网址到浏览器时，浏览器做了哪些工作：输入url=》浏览器查找缓存=》DNS域名解析=》浏览器与服务器建立连接。

        浏览器与服务器建立连接过程中要经历浏览器渲染、js引擎解析、创建对象和编译。

        浏览器渲染主要是对html、css的渲染，渲染引擎解析流程是构建DOM树=》构建CSS规则树=》构建render树（浏览器将DOM树和CSS规则树结合，构建出渲染树）=》布局（计算出每个节点在屏幕中的位置）=》绘制（遍历render树，并使用UI后端层绘制每个节点）

        js引擎解析流程是创建Window对象（Window对象是全局执行环境，当页面被创建时产生，所有全局变量或者函数都是Window的属性，DOM树也会被映射到Window的document对象上，页面关闭或者浏览器关闭时即被销毁）=》加载文件（完成js引擎分析分析它的语法和词法是否合适，合适即进入预编译阶段）=》预编译（寻找全局变量声明和函数声明，将它作为window的属性和方法加入到window的对象中）=》数据分析

重排重绘概念解说：

        重排：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排，表现为重新生成布局，重新排列元素。

        重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变。

        重排发生是重新执行渲染引擎流程的布局、绘制。

        规则：单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。

        重排和重绘代价是高昂的，它们会破会啊用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

        重绘不一定会出现重排，重排必然会出现重绘，结合上面的浏览器渲染引擎的流程解说，更容易理解。

触发重排和重绘：

• 添加、删除、更新DOM节点；
• 通过display：none；
• 通过visibility：hidden；
• 添加动画；
• 添加一个样式表；
• 用户行为。