这2个概念表面上和代码无关，和浏览器如何工作有关。但是，了解这2个概念，并且注意一下在写代码的时候如何减少重排，可以优化浏览器的性能，提高速度
1.重绘是元素属性发生改变，比如颜色，背景改变等，重新绘制元素（repaint）
重排是重排是更明显的一种改变，可以理解为渲染树需要重新计算。具体重排是什么可以看下面重排的原因部分。
2.浏览器重排和重绘都会影响浏览器的性能，特别是重排
3.引起重排的原因：
① dom树的变化 体现为增加或者删除元素
②看到的视图发生变化，包括元素的位置改变，大小改变（宽高，内外边距，边框），增加或者减少内容，窗口尺寸改变
③获取某些属性：
这些属性包 括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，多次使用这些值时应进行缓存。
4.具体如何在代码中减少重排的几个点：
①js里面修改和增加样式，由原来访问style属性一个个修改，改为css写一个类，js添加上去
②在内存中多次操作节点，再添加到内存中。例如异步获取表格里面的数据，渲染到页面的时候。可以先获取数据，在内存中构件整个表格的html片段，再一次性添加到文档中，而不是循环添加每一行
③将需要多次重排的元素，position改为absolute或者fixed，使他脱离文档流，不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位
④由于display为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作，可以先隐藏他（还在文档流中），操作完成后再显示。这样在隐藏和显示的时候触发2次重排
⑤在需要经常获取引起浏览器重排的属性时，要缓存到变量。
另外，几个要知道的东西：
重绘不一定有重排，但是重排一定有重绘
浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次 计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间
页面渲染过程：
1.解析HTML代码并生成一个 DOM 树。
2.解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。
3.生成一个渲染树（根据DOM元素的几何属性构建）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。
4.当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。
---------当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再 根据渲染树节点的样式属性绘制出页面
以上为暂时性的理解。代码部分还有的没有实现过。以后有了更深的理解再补充。
参考博文：
https://www.cnblogs.com/gyjWEB/p/4547140.html
https://blog.csdn.net/sinat_37328421/article/details/54575638