首先看浏览器生成页面的过程

生成页面过程

是什么

网页生成的时候，至少会渲染一次后面可能会不断重新渲染；重新渲染需要重新生成布局(重排)和重新绘制(重绘)。

重新渲染的情况

修改DOM
修改样式表
用户事件

重排一定会重绘，重绘不一定触发重排（为什么？）

重新渲染很耗费资源，需要减少重绘重排

1.不要将读写操作放在一个语句里，因为在样式写操作后如果有下面属性的读操作都会触发浏览器重新渲染

offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()

table元素重排重绘成本高于div

react 组件性能优化
影响网页性能最大的因素是浏览器的重绘（reflow）和重排（repaint）。react 背后的 virtua...
前端收藏文章
优化CSS重排重绘与浏览器性能
浏览器网页重绘重排
首先看浏览器生成页面的过程是什么网页生成的时候，至少会渲染一次后面可能会不断重新渲染；重新渲染需要重新生成布局...
简单谈谈开发过程中React组件的性能优化
浏览器的重绘和重排版(reflows & repaints)（DOM操作都会引起）才是导致网页性能问题的关键。而R...
浏览器重排(回流)重绘以及优化方案
一、什么是重排和重绘要说清重排(reflow)和重绘(repaint)，首先要理解排列和绘制，浏览器渲染页面时，...
浏览器页面的重绘和重排
对于页面，我们经常有CSS对网页进行呈现样式效果，这就涉及到了页面的重绘和重排重绘(repaints)与重排(r...
dom重排和重绘
重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置） DOM的变化影响了元素的几何属性，浏览...
浏览器性能相关
阮一峰写的一篇网页性能管理详解，文章中解释了浏览器重排、重绘的概念，比较清晰易懂。总结点：网页的生成过程主要是...
浏览器的重排-重绘
重排（重构/回流/reflow）重绘（repaint/redraw）一、浏览器运行机制浏览器加载完ht...
web性能优化 - 重排与重绘
重排与重绘重排 [重构/回流/reflow]：当DOM变化影响了节点的几何属性，浏览器需要重新计算节点的几何属性...