JavaScript 渲染性能优化 requestIdleCallback

MDN 文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback

文档细节讲的很详细, 建议阅读. 我就不过多阐述了, 只给出实际使用代码:

function requestIdleCallbackExample() {
  // 渲染10W个li标签
  const renderCount = 100000;
  let renderIndex = 0;
  function render(deadline) {
    while (deadline.timeRemaining() > 0 && renderIndex < renderCount) {
      const li = document.createElement("li");
      li.textContent = renderIndex;
      document.body.appendChild(li);
      renderIndex++;
      console.log(`渲染第${renderIndex}个li标签`);
    }
    if (renderIndex < renderCount) {
      requestIdleCallback(render);
    }
  }
  requestIdleCallback(render);
}

requestIdleCallbackExample();