重绘（repaint）和重排（reflow）
大家知道前端的相关页面是怎么生成的吗？
我们都知道前端有三剑客，分别是html，css和JavaScript
其中html在页面生成的过程当中被解析中DOM树，而Css会被解析成CSS树，这两个树有机的结合在一起就变成了渲染树，顺便提一下render就是渲染的意思。这个过程就是所谓的Attachmenrt
接下来，生成我们想要的布局（flow），浏览器在屏幕上会画出我们render树的所有节点
最后将布局paint在屏幕上，显示出整个屏幕，最后两步是最耗时的，就是我们通常说的渲染的过程
其实重排和重绘没那么难去理解，很简单的概念就是，重绘是对节点简单的修改一下颜色，不改变节点的位置等，不需要付出额外的计算，而重排就不一样了。它不仅仅会改变颜色等，还会改变位置等，导致整个页面需要重新计算，比如改变元素的宽度，这将会导致整个页面需要重新计算，所以重绘不一定导致重排，但是重排一定会导致重绘。
发生重排的情况：（其实除了改变颜色以外，其他的几乎都是重排）
改变元素的高度或者宽度
改变元素的位置
改变元素的尺寸
改变元素字体的大小
改变浏览器窗口的尺寸大小
激活CSS伪类（没接触过，写完就去了解一下哈哈哈）
添加删除元素
必须提一下的是，开销最大的一次重排就是首次渲染的时候
重排的影响范围分为全局和局部
这里简单说一下全局
比如
<body>
<div class="hello">
<h3>hello</h3>
<p><strong>Name:</strong>Bding<p>
<h4>male</h4>
<ol>
<li>1</li>
<li>2</li>
</ol>
</div>
</body>
这里只要p标签变了，会导致包裹它的div标签也发生变化，从而导致body也发生变化，甚至会导致p的兄弟节点也发生变化，这样成为全局重排
而局部重排就是，一个div，你写死他的几何信息，即它的宽度，高度等信息统统写死，那么这时候无论里面的元素如何变化，即只会作用于这个div当中。
重排的坏处：重排肯定是不好的，非常消耗性能，作为一名前端开发工程师，我们必须要优化用户的体验，减少性能的浪费。
减少重排的范围
尽量在低层级去改变DOM节点，例如，我们这里要修改p节点，我们一开始就不应该把样式放在div节点中，从而导致div节点也受到影响。。
减少table布局，可能不少同学不知道table布局是什么，其实是一个非常简单的概念，举个例子来说
<div class= "box">
<div class = "left"></div>
<div class =" right"> </div>
</div>
<style>
.box{
table
}
.left .right{
table-cell
}
.left{
background:yellow}
.right{
background:skyblue}
</style>设计好一个table-cell后，其余元素会自动平分其宽度。
然而这种布局在重排(Reflow)中是致命的，由于一个子页面的变动会导致原本已经适应了父元素大小的另一个兄弟元素也变了大小，非常容易导致重排（reflow）
减少重排的次数
分离读写操作，千万不要在两个读之间加入一个写的操作，充分利用好浏览器渲染队列的机制，就是一次操作完所有的读操作，再去进行写操作，这样实际上只触发了一次重排，如果是五次的话，每次都是读完就去写，这样导致进行了五次重排，而读写分开实际上就是只是操作了一次