回流和重绘那些事（值得收藏）

前言

前言：一般在面试的时候，老是被面试官问道这个知识点，刚开始面试的时候，是不是被这个问题问住过，那种尴尬的场面，可以用脚趾头抠出两室一厅一厨一卫。
那么今天就好好弄清楚这两个是什么 玩意，从此，这个面试点不在让你尴尬。

定义

回流：在javascript中，回流也叫做重排，是指当渲染树中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变时，浏览器重新渲染部分dom或全部dom的过程；简单来说，就是重新排版整个页面。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘：当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），换句话说这些属性只是影响元素的外观，风格，而不会影响布局的，浏览器只会将新样式赋予元素并进行重新绘制操作。

注意：回流（重排）必将引起重绘，而重绘不一定会引起回流（重排）。

引起重排的情形：

1. 添加或者删除可见的DOM元素；
2. 元素位置改变；
3. 元素尺寸改变（margin、padding、border、width和height）；
4. 内容改变，尤其是输入控件；
5. 页面渲染初始化；
6. 浏览器窗口尺寸改变（resize事件发生时）；
7. 改变文字大小；
8. 激活伪类，如:hover；
9. offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算；会使浏览器将渐进回流队列Flush，立即执行回流（重排）；

引起重绘的情形

1. background-color
2. border-color
3. visibility
4. 。。。

如何减少重排和重绘

1. 采用类名的写法，尽量不在javascript中操作样式；
2. 开发过程中，让要操作的元素进行”离线处理”，处理完后一起更新；
3. 避免设置多层内联样式；
4. 使用css3硬件加速（具体来说，‌CSS3硬件加速的实现依赖于GPU的强大计算能力，‌通过特定的CSS属性（‌如transform）‌来实现。‌这些属性不会触发浏览器的重绘（‌repaint）‌操作，‌而是直接在GPU中进行渲染，‌从而大大减少了CPU的计算负担），可以让transform、opacity、等动画效果不会引起回流重绘；
5. 先隐藏元素，进行修改后再显示该元素，因为display:none上的DOM操作不会引发回流和重绘；
6. 对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流（重排）

总结

在项目中认识重排和重绘可以让前端水平有所提升，同时也能提高页面性能，所学点知识没啥坏处，看到这麻烦点赞收藏，避免用的时候找不到哦。