跳到主要内容

requestAnimationFrame

2023年03月16日
柏拉文
越努力，越幸运

一、认识​

requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象。

二、requestAnimationFrame​

<ul id="container"></ul>
<script>
    const ul = document.getElementById("container");
    const total = 100000;
    const pageSize = 20;

    function render(start, startLen) {
    if (startLen <= 0) {
        return false;
    }
    let realizeSize = Math.min(startLen, pageSize);
    window.requestAnimationFrame(() => {
        for (let i = 0; i < realizeSize; i++) {
        let li = document.createElement("li");
        let index = start + i;
        li.innerHTML = "数据" + index;
        ul.append(li);
        }
        render(start + realizeSize, startLen - realizeSize);
    });
    }
    render(0, total);
</script>

三、DocumentFragment、requestAnimationFrame​

DocumentFragments是DOM节点，但并不是DOM树的一部分，可以认为是存在内存中的，所以将子元素插入到文档片段时不会引起页面回流

const ul = document.getElementById("container");
const total = 100000;
const pageSize = 20;

function render(start, startLen) {
    if (startLen <= 0) {
        return false;
    }
    let realizeSize = Math.min(startLen, pageSize);
    window.requestAnimationFrame(() => {
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < realizeSize; i++) {
            let li = document.createElement("li");
            let index = start + i;
            li.innerHTML = "数据" + index;
            fragment.append(li);
        }
        ul.append(fragment);
        render(start + realizeSize, startLen - realizeSize);
    });
}
render(0, total);

参考资料​

「前端进阶」高性能渲染十万条数据(时间分片)