身为前端,我们经常遇到数据列表渲染等功能,我相信很多人都会完成这类的功能,使用的方法也大多是循环数据,创建列表元素,然后经新元素添加到列表后面,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大量数据加载</title>
</head>
<body>
<div class="box">
<ul id="ulBox"></ul>
</div>
</body>
<script>
(function () {
const ul = document.getElementById('ulBox')
if(!ul){
return
}
const array = new Array(100000) //存放将要渲染的列表数据
for (var i = 0; i < array.length; i++){
array[i] = i;
var li = document.createElement('li');
li.innerText = array[i];
ul.appendChild(li);
}
// 点击列表项
ul.addEventListener('click', function(e) {
if(e.target.tagName === "LI"){
alert(e.target.innerText)
}
})
})()
</script>
</html>
数据列表的渲染就这样很快的完成了。对于少量的数据来说,这个方法足够用了,但是当列表数据非常大的时候,我们不难发现,页面需要加载很长时间才能正常显示出来,这显然不是我们想要的结果。
那么如何在数据量很大的时候,还能很快显示呢?接下来我们将分析并解决这个问题
我们都知道显示屏的大小是固定的,无论数据量有多少,初看我们也只需要显示最开始的数据而已,所以我们可以分批次让数据显示出来,这样既不需要长时间的等待,也不会影响数据的显示。
在此之前,我们需要了解一下createDocementFragment的功能,不太清楚的同学可以自己了解一下,这里就不再赘述了
以下附上实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大量数据加载和花样打印</title>
</head>
<body>
<div class="box">
box
<div id="create"></div>
<ul id="ulBox"></ul>
</div>
</body>
<script>
(function () {
const ul = document.getElementById('ulBox')
if(!ul){
return
}
const total = 100000;
const once = 20;
const number = total / once;
var areadyNum = 0;
const array = new Array(100000) //存放将要渲染的列表数据
for (var i = 0; i < array.length; i++){
array[i] = i;
}
function addItem() {
// 创建一个虚拟节点占位
const fragment = document.createDocumentFragment();
for( var i = 0; i < once; i++){
const li = document.createElement("li")
li.innerText = array[areadyNum * once + i + 1]
fragment.appendChild(li);
}
ul.appendChild(fragment)
continueDo();
areadyNum++;
}
function continueDo () {
if(areadyNum < number){
window.requestAnimationFrame(addItem);
}
}
continueDo();
// 点击列表项
ul.addEventListener('click', function(e) {
if(e.target.tagName === "LI"){
alert(e.target.innerText)
}
})
})()
</script>
</html>
如此我们就可以看见数据在随着时间慢慢的往页面里添加,此时大量数据列表渲染的问题也就解决了。