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();
