RequestIdleCallback/RAF/setTimeout

https://juejin.cn/post/7033959714794766372
requestIdleCallback可以告知当前帧剩余时间
setTimeout有4ms延迟，没有RIC精确
<body>
    <div><button id="btn1">渲染十万条</button></div>
<div><button id="btn2">requestIdleCallback 渲染十万条</button></div>
<div><button id="btn3">clear</button></div>
<div style="display: flex;">
  <ul id="list1"></ul>
  <ul id="list2"></ul>
</div>

<script>
  const NUM = 100000
  // 方案一：无脑添加
  const NUM1 = NUM;
  let list1 = document.getElementById("list1");
  document.getElementById("btn1").addEventListener('click', bigInsert1);
  function bigInsert1() {
    let i = 0;
    while (i < NUM1) {
      let item = document.createElement("li");
      item.innerText = `第${i++}条数据`;
      list1.appendChild(item);
    }
  }
  // 方案二：时间切片
  const NUM2 = NUM
  let list2 = document.getElementById("list2");
  let f = document.createDocumentFragment();
  let i = 0;
  let timer =null

  document.getElementById("btn2").addEventListener('click', () => {
    timer = requestIdleCallback(bigInsert2);
  });
  function bigInsert2(deadline) {
    while (deadline.timeRemaining() > 10 && i < NUM2) {
      console.log('空闲执行中');
      let item = document.createElement("li");
      item.innerText = `第${i++}条数据`;
      list2.appendChild(item)
      if (i%100 === 0) break; // 每次渲染 100 条
    }

    if (i < NUM2) {
      timer = requestIdleCallback(bigInsert2)
    }
  }
  document.getElementById("btn3").addEventListener('click', ()=>{
    list1.innerHTML = '';
    list2.innerHTML = '';
    cancelIdleCallback(timer);
    i = 0;
  });
</script>
  </body>