重排重绘

重排Reflow

  • 定义

DOM结构中的各个元素都有⾃⼰的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该 出现的位置，这个过程称之为reflow

  • 触发Reflow

当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint 当你移动 DOM 的位置，或是搞个动画的时候 当你修改 CSS 样式的时候 当你 Resize 窗⼝的时候（移动端没有这个问题），或是滚动的时候 当你修改⽹⻚的默认字体时候（影响⽐较⼤，性能问题）

重绘Repaint

  • 定义

当各种盒⼦的位置、⼤⼩以及其他属性，例如颜⾊、字体⼤⼩等确定下来后，浏览器于是便把这些元素都按照各⾃的特性 绘制了⼀遍，于是⻚⾯的内容出现了，这个过程称之为 repaint 。即⻚⾯需要呈现的内容，⼀起画到屏幕上。

  • 触发Repaint

DOM改动 CSS改动

（重点）如何尽量减⼩Repaint？ ⽐如⻚⾯有⼀个计算器，⽤户在输⼊框输⼊⼀些计算表达式，最后显示计算结果，然后把输⼊给隐藏掉。这⾥就有两个交互，先是⽤户输⼊，将输⼊隐藏掉，然后将结果显示出来。这两个交互呈现内容不⼀样，当然就需要Repaint，那怎么做

优化方法:(链接：https://juejin.cn/post/6976644294740279310)

  • 避免频繁使用 style，而是采用修改class的方式。

  • 使用createDocumentFragment进行批量的 DOM 操作。

  • 对于 resize、scroll 等进行防抖/节流处理。

  • 添加 will-change: tranform ，让渲染引擎为其单独实现一个图层，当这些变换发生时，仅仅只是利用合成线程去处理这些变换，而不牵扯到主线程，大大提高渲染效率。

  • 当然这个变化不限于tranform, 任何可以实现合成效果的 CSS 属性都能用will-change来声明。

PreviousSEONext安全

Last updated