前言最近在研究virtualdom，然后回顾了一下reflow和repaint的研究。回流和重绘大家好像都不陌生，但是具体的，就没啥好说的了。下面是我的小整理：浏览器渲染流程在理解这两个概念之前，我们先来看看浏览器渲染的工作流程。这里我们以webkit渲染引擎为例。浏览器请求html文档后，将html解析成dom树。CSS被解析成css样式规则。解析完成后，会结合dom树和样式规则构建渲染树。浏览器计算渲染树中每个渲染对象的位置和大小，即布局（layout）最终绘制（painting）回流和重绘回流（reflow）。当元素的大小、布局、隐藏等发生变化时，导致渲染树的部分（或全部）重新构建，这称为回流。当页面首次加载时，每个页面至少被重排一次。在回流期间，浏览器会将受影响的渲染树部分作废，并重建这部分渲染树。回流完成后，浏览器会将受影响的部分重新绘制到屏幕上，这个过程称为重绘。重绘（repaint）当渲染树中的某些元素需要更新属性时，这些属性只影响元素的外观和样式，而不会影响元素的大小、布局和隐藏元素，如background-color、它被称为重绘。注意：回流一定会引起重绘，重绘不一定会引起回流。发生reflow时可以看到元素的尺寸变化，比如width、height、margin、padding等属性，引起尺寸变化。窗口调整大小事件触发元素显示属性。元素位置变化等性能优化Reflow和重绘对web性能影响很大，因为每次重新解析html和css然后构建rendertree都需要大量的计算。这个过程非常耗时和性能。如何减少呢？建议适当设置页面元素的高度。比如img片段在文档流中占用空间从0到满载会导致频繁重绘，降低dom深度，可以减少解析器耗时，尽可能简化CSS复杂动画。让它的元素脱离文档流，使用position:absolute或者position:fixed来减少对父元素的影响当然，并不是这里列出的所有方法，如果大家有更好的建议，希望能和参考文档一起分享https：//kb.cnblogs.com/page/1...https://www.html5rocks.com/zh...
