requestAnimationFrame 是什么

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 顾名思义，请求动画帧，也称 帧循环。 其实就是该API能以浏览器的显示频率来作为其动画动作的频率，比如浏览器每16.7ms刷新一次，动画回调也每16.7ms调用一次，这样就不会存在过度绘制的问题，动画不会掉帧，自然流畅。

requestAnimationFrame 可以用在长列表优化（请求动画帧、减少重排的次数）

const renderList = async () => {
  console.time("列表时间");
  const list = await getList();
  const total = list.length;
  const page = 0;
  const limit = 20;
  const totalPage = Math.ceil(total / limit);
  const render = (page) => {
    if (page >= totalPage) return;
    window.requestAnimationFrame(() => {
      for (let i = page * limit; i <= page * limit + limit; i++) {
        const item = list[i];
        const div = document.createElement("div");
        div.className = "flex";
        div.innerHTML = `<img src="${item.imgUrl}"/><span>${item.title}</span>`;
        container.appendChild(div);
      }
      render(page + 1);
    });
  };
  render(page);
  console.timeEnd("列表时间");
};
renderList();