一、页面渲染
渲染引擎会解析HTML文档来构建DOM树,渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。然后,DOM树和CSSOM树关联起来构成渲染树(RenderTree
)。然后浏览器按照渲染树进行布局(Layout
),计算每个节点的几何结构,最后一步通过绘制显示出整个页面。
DOM发生改变的时候触发重排,使DOM重新排列,重绘不一定会重排,但重排一定会发生重绘,重绘和重排都会耗费浏览器的性能,应该尽量避免。
二、触发重排的操作
1.页面第一次渲染 在页面发生首次渲染的时候,所有组件都要进行首次布局,这是开销最大的一次重排。
2.浏览器窗口尺寸改变。
3.元素位置和尺寸发生改变。
4.新增和删除可见元素。
5.内容发生改变(文字数量或图片大小等)。
6.元素字体大小变化。
三、触发重绘的操作
页面中元素样式的改变并不影响它在文档流中的位置时(例如:color
、background-color
、visibility
等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。
四、减少重排和重绘
1. 分离读写操作。
2. 样式集中改变。
3. 进行离线操作。