重排和重绘

https://blog.csdn.net/qq_39998026/article/details/125441268
一、页面渲染的流程

    解析html绘制DOM树

    解析css绘制CSS树

    把DOM和CSSOM组合生成render tree（渲染树）

    在渲染树的基础上进行布局，计算每个节点的几何结构

    把每个节点绘制到屏幕上（painting）

DOM发生改变的时候触发重排，使DOM重新排列，重绘不一定会重排，但重排一定会发生重绘，重绘和重排都会耗费浏览器的性能，尽量避免。

二、什么是重排和重绘

重绘就是重新绘制（repaint）：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

重排就是重新排列（reflow）：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

三、重排

1、引起重排的属性和方法

改变元素几何信息（大小和位置），都会引起，如：

    添加或删除可见的DOM元素

    元素位置改变，或者使用动画

    元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）

    内容改变（例如：文本改变或图片被另一个不同尺寸的图片替代、在input框输入内容）

    浏览器窗口尺寸改变（resize事件发生时）

    页面渲染初始化

    设置style属性的值

    计算offsetWidth、offsetHeight、offsetTop和offsetLeft等布局信息

    激活CSS伪类（如 :hover）

    查询某些属性或调用某些方法（如：getComputedStyle()、getBoundingClientRect()）

2、几何属性和布局信息的属性有哪些？

几何属性包括布局、尺寸等可用数学几何衡量的属性：

    布局：display、float、position、list、table、flex、columns、grid

    尺寸：margin、padding、border、width、height

获取布局信息的属性或方法：

    offsetTop、offsetLeft、offsetWidth、offsetHeight

    scrollTop、scrollLeft、scrollWidth、scrollHeight

    clientTop、clientLeft、clientWidth、clientHeight

    getComputedStyle()

    getBoundingClientRect()

四、重绘

引起重绘的属性：

外观属性包括界面、文字等可用状态向量描述的属性，如：

    界面：appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip、border-radius、background-size、visibility

    文字：text、font、word

五、减少重排和重绘

    避免一条一条的修改DOM的样式，可以直接修改DOM的className

    避免把DOM结点的属性值放在一个循环里当成循环里的变量

    给动画的HTML元件使用fixed或absolute的position，那么修改他们的css是不会重排

    避免在大量元素上使用:hover

    分离读写操作

    避免使用Table布局

    避免设置多层内联样式

    避免在布局信息改变时查询布局信息

    当需要对DOM元素进行一系列的操作时，可以先使元素脱离文档流，再对其进行一些列操作，然后再把元素带回文档中

六、使元素脱离文档流的方法：

    隐藏元素，施加修改，重新显示

    使用document fragment在当前DOM之外构建一个子树，再把它拷贝会文档

    将元素元素拷贝到另一个脱离文档的节点中，修改副本，完成后再替换原始元素