前端性能优化的方向

• 分批渲染DOM：避免一次性渲染大量DOM，可以减少浏览器的性能压力。
• 集中进行DOM操作：将多次DOM操作集中在一起进行，减少不必要的渲染。
• 移除可视区域以外的DOM：对于不在可视区域的DOM元素，可以将其从DOM树中移除，以减少内存占用和渲染负担。

实现大量数据渲染的方法

1. 使用定时器

• 方法概述：通过setInterval定时器分批插入DOM元素，每次处理一定数量的节点。
• 代码示例：

export default (element, data) => {
  const fragment = document.createDocumentFragment();
  let timer = setInterval(() => {
    for (let i = 0; i < 20; i++) {
      const item = data.shift();
      if (!item) {
        clearInterval(timer);
        break;
      }
      const div = document.createElement('div');
      div.innerText = item.string;
      div.setAttribute('class', 'item');
      div.style.backgroundColor = item.color;
      fragment.appendChild(div);
    }
    element.appendChild(fragment);
  }, 100);
};

2. 用requestAnimationFrame代替定时器

• 方法概述：使用requestAnimationFrame来代替setInterval，它会在浏览器下一次重绘之前执行回调函数，从而更加精确地控制DOM操作的时机。
• 代码示例：

export default (element, data) => {
  requestAnimationFrame(() => step(element, data));
};
const step = (element, data) => {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 20; i++) {
    const item = data.shift();
    if (!item) {
      break;
    }
    const div = document.createElement('div');
    div.innerText = item.string;
    div.setAttribute('class', 'item');
    div.style.backgroundColor = item.color;
    fragment.appendChild(div);
  }
  element.appendChild(fragment);
  data.length && requestAnimationFrame(() => step(element, data));
};

3. 使用虚拟滚动

• 方法概述：虚拟滚动技术通过只渲染可视区域的数据来提高列表的渲染性能，并根据页面滚动动态添加或删除DOM节点。
• 实现过程：
  • 设置父节点的position为relative，子节点的position为absolute，并通过transform属性设置子节点的位置。
  • 使用boundary数组记录渲染区域的上下边界。
  • 使用startIndex和endIndex来确定需要渲染的数据范围。
  • 定义step变量表示每次批量添加或删除的DOM数量，以及threshold阈值来触发DOM的添加或删除。
• 代码示例：

export default (element, data) => {
  const boundary = [0, 0];
  let startIndex = 0;
  let endIndex = 0;
  const step = 10;
  const threshold = 200;
  const init = () => {
    element.style.position = 'relative';
    drop();
    initScroll(element);
  };
  const drop = () => {
    // ...代码逻辑同上...
  };
  const rise = () => {
    // ...代码逻辑同上...
  };
  const createElement = (item, mode) => {
    // ...代码逻辑同上...
  };
  const initScroll = (element) => {
    // ...代码逻辑同上...
  };
};

虚拟滚动的scroll事件处理

• 方法概述：通过监听滚动事件并结合阈值（threshold）来决定是否添加或删除DOM节点，以及是否触发数据的添加或删除。
• 代码示例：

export const scroll = (element, func) => {
  let top = 0;
  return _.throttle(() => {
    const { scrollTop, scrollHeight } = element;
    if (scrollTop > top) {
      top = scrollTop;
      func({ mode: Mode.append, scrollTop, scrollBottom: scrollHeight - scrollTop - element.clientHeight });
    } else if (scrollTop < top) {
      top = scrollTop;
      func({ mode: Mode.before, scrollTop, scrollBottom: scrollHeight - scrollTop - element.clientHeight });
    }
  }, 100);
};