-
使用懒加载技术,加载部分数据,监听鼠标滚动事件继续加载。
-
使用虚拟滚动。
-
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();
网友评论