requestAnimationFrame 加载大列表

最新推荐文章于 2024-11-02 19:19:35 发布

倔强的钢蛋

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量160

点赞数

分类专栏： js篇文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43938535/article/details/129634474

版权

js篇专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用requestAnimationFrame来分批创建并插入3000个li元素，以提升页面渲染性能。通过创建文档碎片和限制每次插入的数量，减少重绘和回流，从而提高用户体验。同时，文章还添加了点击li节点显示其内容的事件监听器。

摘要由CSDN通过智能技术生成

requestAnimationFrame 可提升页面的渲染效果

// index.html
<ul id='js-list'></ul>

(function(){
    let ulBox = document.getElementById('js-list');
    if(!ulBox) return;
    const total = 3000; // 待生成的总数（li节点）
    const step = 5; // 每个片段生成的数量
    const executorNum = total/step; // 需要执行生成片段节点的次数
    let num = 0; // 记录已经生成了几轮片段次数
    let animationId;
    function createFragment() {
        let fragment = document.createDocumentFragment(); // 创建片段
        for(let i = 0; i < step; i++) {
            let node = document.createElement('li');
            node.innerText = (num*step) + i + 1;
            fragment.appendChild(node); // 将li节点添加到片段中
        }
        num++;
        ulBox.append(fragment);
        setNode(); // 每次执行完后再次执行requestAnimationFrame;
    }
    
    setNode();
    function setNode() {
        if(num < executorNum) {
            animationId = window.requestAnimationFrame(createFragment);
        } else {
            window.cancelAnimationFrame(animationId);
        }
    }
    // 在生成的li节点上添加事件
    ulBox.addEventListener('click',function(e) {
        const target = e.target;
        if(target.tagName === 'LI') {
            alert(target.innerText);
        }
    })
})()