Wepress

Appearance

如何避免重绘或者重排？ ​

参考答案： ​

如何触发重排和重绘 ​

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

  • 添加、删除、更新DOM节点
  • 通过display: none隐藏一个DOM节点-触发重排和重绘
  • 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
  • 移动或者给页面中的DOM节点添加动画
  • 添加一个样式表，调整样式属性
  • 用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排 ​

集中改变样式 ​

我们往往通过改变class的方式来集中改变样式

js
// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light';

// 根据判断来设置不同的class
ele.setAttribute('className', theme);

使用DocumentFragment ​

我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点，然后在此节点上批量操作，最后插入DOM树中，因此只触发一次重排

js
var fragment = document.createDocumentFragment();

for (let i = 0;i<10;i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);

提升为合成层 ​

元素提升为合成层有以下优点：

  • 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
  • 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
  • 对于 transform 和 opacity 效果，不会触发 layout 和 paint

提升合成层的最好方式是使用 CSS 的 will-change 属性：

css
#target {
  will-change: transform;
}

题目要点： ​

  • 批量更新 DOM、避免频繁访问布局属性 和 使用 transform 和 opacity 等方法可以有效减少重绘和重排，提升页面性能。
  • 简化选择器 和 减少 DOM 元素数量 有助于提高 CSS 渲染效率。
  • 使用现代框架 和 CSS 动画 可以进一步优化渲染性能。