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之外构建一个子树,再把它拷贝会文档
将元素元素拷贝到另一个脱离文档的节点中,修改副本,完成后再替换原始元素