陪玩程序源码，回流与重绘的优化策略

避免逐行修改样式，合并样式修改

以下操作会导致 3次重绘 1次回流：

const el = document.querySelector('.el');
el.style.color = 'blue'; // 导致重绘 
el.style.backgroundColor = '#96f2d7'; // 导致重绘 
el.style.margin = '10px'; // 导致回流（回流会引起重绘）

如果采用动态添加class或者使用cssText方式的话，只会导致1次回流，从而减少重绘次数：

.test {
    color: blue;
    background-color: #96f2d7;
    margin: 10px;
}
const el = document.querySelector('.el');
el.classList.add('test')
//或者使用cssText
el.style.cssText = "color: blue; background-color: #96f2d7; margin: 10px;";

批量修改 DOM

DOM离线处理

离线的DOM不包含在当前DOM树中，因此对离线DOM的处理不会引起页面的回流和重绘。

使用display: none可以将元素从渲染树中彻底移除，元素既不可见，也不参与布局。在对该DOM进行操作时，不会触发回流和重绘，只有在操作完成后，将display属性改为显示时，才会触发回流和重绘。
需要注意的是，visibility: hidden只会影响重绘，而不会影响重排。

const el = document.querySelector('.el');
el.style.display = 'none';
//一系列修改样式、大小或添加删除子节点操作
el.style.display = 'block';

以上对隐藏的DOM元素操作不会引发其他元素的重排，只会在隐藏和显示时触发两次重排
文档片段(Document Fragment)

利用文档片段（Document Fragment）在当前DOM之外构建一个子树，并将其复制回文档中。文档片段允许我们在内存中创建DOM结构，而不会直接影响到文档的回流和重绘。这样，在构建完整子树后，我们可以将文档片段的内容一次性地插入到文档中，这样只会触发一次重排。

const el = document.querySelector('.el');
const fragment = document.createDocumentFragment();
//批量添加子节点操作
el.appendChild(fragment);

拷贝替换
将原始元素复制到一个脱离文档的节点中，对该节点进行修改，然后再替换原始的元素。通过这种方式，我们可以在不影响主文档的情况下对元素进行操作，这样只会触发一次重排。

const el = document.querySelector('.el');
const clone = el.cloneNode(true);
//一系列修改样式、大小或添加删除子节点操作
el.parentNode.replaceChild(clone, el);

使用 absolute 或 fixed 脱离文档流

当元素的position属性为absolute或fixed时，它们不会对其他元素的布局产生影响，因此在进行样式修改时，只有该元素本身及其子元素会触发重排和重绘。这样可以减小重排的范围，提高页面的渲染性能。

需要注意的是，将元素的position属性设置为absolute或fixed会使元素脱离文档流，可能会导致其他元素的布局错乱。在使用这种方法时，需要仔细考虑并进行适当的布局调整，以确保页面的正确显示和交互。

避免强制同步布局

在读取元素的布局信息（如offsetTop、offsetLeft、getBoundingClientRect()等）时，会触发强制同步布局导致回流重绘。尽量避免频繁读取布局信息，可以通过缓存布局信息或一次性读取多个属性来减少回流和重绘。

使用节流和防抖

对于一些频繁触发的事件（如scroll和resize），可以使用节流（throttle）或防抖（debounce）来限制事件的触发频率，从而减少不必要的回流和重绘。

// 节流函数封装
function throttle(func, delay) {
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// 防抖函数封装
function debounce(func, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}