美文网首页
创建大量元素(li)导致页面卡死崩溃解决方案

创建大量元素(li)导致页面卡死崩溃解决方案

作者: 在小白的路上越走越远 | 来源:发表于2020-11-24 23:26 被阅读0次
    1. 使用懒加载技术,加载部分数据,监听鼠标滚动事件继续加载。

    2. 使用虚拟滚动。

    3. timeChunk。

    主要拓展timeChunk:
    timeChunk 函数让创建节点的工作分批进行,比如把1秒钟创建1000个节点,改为每隔200毫秒创建8个节点。

            var timeChunk = function (ary, fn, count) {//ary是需要渲染的数组,fn是业务(添加元素进页面),count是显示几个
                var obj,t;
                var len = ary.length;
                var start = function () {
                    for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
                        //start被执行count次就会将对应的值给到fn,触发fn执行,当count次被执行完,定时器再一次执行count次,知道数据被渲染完,清空定时器
                        var obj = ary.shift();
                        fn(obj);
                    }
                };
                return function () {//当renderFriendList被调用时 start被执行
                    t = setInterval(function () {
                        if (ary.length === 0) { // 如果全部节点都已经被创建好
                            return clearInterval(t);
                        }
                        start();
                    }, 200); // 分批执行的时间间隔,也可以用参数的形式传入
                };
            };
    
            var ary = [];
            for (var i = 1; i <= 1000; i++) {
                ary.push(i);
            };
            var renderFriendList = timeChunk(ary, function (n) { 
                var div = document.createElement('div');
                div.innerHTML = n;
                document.body.appendChild(div);
            }, 8);
            renderFriendList();
    

    相关文章

      网友评论

          本文标题:创建大量元素(li)导致页面卡死崩溃解决方案

          本文链接:https://www.haomeiwen.com/subject/ojvoiktx.html