1、reflow和repaint的定义回流（reflow）：只要添加或删除DOM节点，或者修改元素的形状和大小，都会触发reflow。repaint（重绘）：只要元素样式属性（形状、大小除外）发生变化，就会触发重绘。二、浏览器解析过程1、解析HTML构建DOM树渲染引擎开始解析HTML文档，将HTML标签转化为DOM节点，转化后的产物称为DOM树。2.解析CSS构建CSSOM树排版引擎开始解析CSS选择器，将CSS选择器集合解析成CSS对象模型（也称CSSOM树）。解释：为什么要把DOM树和CSSOM树分开解析生成呢？因为和DOM交互会很慢，所以我们用CSS自己再建一棵树CSSOM，但最终CSS样式还是要映射到DOM树上才能起作用。3、布局渲染树从根节点开始递归调用，计算出每个元素的位置和大小，给每个节点精确坐标（指屏幕上的精确坐标）。4.绘制渲染树在绘制阶段，系统会遍历渲染树并将其内容显示在屏幕上。3.什么情况会导致回流（reflow）1.页面第一次渲染2.浏览器窗口大小改变3.元素位置改变4.元素大小改变5.增删改查DOM元素的显示6.激活CSS伪类(:hover)4.回流重绘优化1.使用visibility:hidden代替display:nonedisplay:show/hide，显示时占空间，元素不占空间隐藏时。隐藏前后DOM结构发生了变化，需要重新渲染（reflow）。visibility：显示/隐藏，显示时占空间，元素隐藏时也占空间。隐藏前后DOM结构没有变化，不需要重新渲染（repaint）。2.使用transform替换top,left,bottom,righttop,left,bottom,right：这些属性直接改变元素的真实位置。例如，如果你设置top:5px;那么该元素实际上距离相关元素的顶部有5px的距离（回流）。transform：该属性只是在视觉上改变了元素的位置，而元素的真实位置并没有改变。例如，如果你设置transform:translateY(5px);元素还在原来的位置，但是相对于原来的位置向下偏移了5px（重绘）。3、避免使用表格布局不要使用表格布局，因为表格需要遍历多次，一个小的改动就会导致整个表格重新布局。4.限制回流的范围例如：（1）更改DOM树末尾的类（2）使用表格时，设置table-layout:auto/fixed，这样表格可以逐行渲染.这些行为可以限制回流范围的影响。5、给position属性为absolute或fixed的元素应用动画效果。这种动画效果不会影响其他元素的布局。这只会导致重绘（repaint）而不是完全回流（reflow）。从而降低性能消耗。6、将频繁重绘或回流的节点设置为图层layer，可以防止该节点的渲染行为影响到其他节点。例如：video、iframe等标签，will-change属性可以将元素变成图层。其他一些方法也可以优化重绘和回流，但是我觉得有些属性必须加上，有些方法必须那样用。你不能为了优化重绘和重排而放弃一些必要的东西。比如避免使用CSS表达式可以减少reflow，但是很多时候我们需要使用CSS表达式，尤其是像弹框或者一些操作页面这样的模块。
