前端面试题之重排和重绘

页面渲染流程

• 解析HTML生成DOM树
• 解析css生成CSSDOM树
• 两个放一起生成渲染树（renderTree）
• 在渲染树的基础上进行布局，计算每个节点的几何结构
• 把每个节点绘制到浏览器上。

重绘和重排的定义

重绘

元素外观被改变，触发了浏览器的行为，根据元素的新属性进行重新绘制，使元素呈现新的外观，就是重绘。

重排

渲染树一部分必须更新，并且节点尺寸发生了改变，浏览器会使渲染树被影响的部分失效，并重新构造渲染树，就是重排。
所以：重绘不一定重排，但重排一定重绘。

常见的引起重绘的属性

• 界面：appearence、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip、border-radius、background-size、visiblity
• 文字：text、font、word

常见的引起重排的属性和方法

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

• 页面渲染初始化
• 添加或删除可见的DOM元素
• 元素的尺寸（内外边距、宽高、边框等）、位置（如动画）、style属性，CSS伪类、内容
• 浏览器窗口发生改变（resize）
• 查询某些属性或调用某些方法（如：getComputedStyle()）

几何属性和布局信息的属性或方法

• 布局：display、float、position、list、table、flex、colums、grid
• 尺寸：margin、padding、border、width、height
• 布局信息的属性和方法：
  • offsetTop、offsetLeft、offsetWidth、offsetHeight
  • scrollTop、scrollLeft、scrollWidth、scrollHeight
  • clientTop、clientLeft、clientWidth、clientHeight
  • getComputedStyle()
  • getBoundingClientRect()

减少重排和重绘

• 避免一条条修改DOM样式，直接修改className

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

• 脱离文档流，修改css不会发生重排

• 分离读写操作

• 避免使用table布局

• 变设置多层内联样式

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

  参考链接：
  https://blog.csdn.net/qq_39998026/article/details/125441268