回流(reflow)重绘(repaint)纯文本讲解

页面渲染dom的过程

浏览器通过 HTML parser 根据深度遍历的原则，把 HTML 解析成 DOM tree;
将 CSS 解析为 CSS Rule tree (CSSDOM tree);
根据 DOM树和 CSS树来构建一个样式表.组合成一颗render树,页面经过重绘和回流 渲染出页面来

什么是回流

当render树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流
每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render树

什么是重绘

在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
重绘是只影响元素的外观，风格，而不会影响布局的，比如background-color

总结

回流(reflow):当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流
重绘(repaint):当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流,当页面布局和几何属性改变时就需要回流