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

2020-11-24  本文已影响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();
上一篇 下一篇

猜你喜欢

热点阅读