大量資料列表渲染優化方法
阿新 • • 發佈：2019-01-05
身為前端，我們經常遇到資料列表渲染等功能，我相信很多人都會完成這類的功能，使用的方法也大多是迴圈資料，建立列表元素，然後經新元素新增到列表後面，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大量資料載入</title>
</head>
<body>
<div class="box">
<ul id="ulBox"></ul>
</div> 資料列表的渲染就這樣很快的完成了。對於少量的資料來說，這個方法足夠用了，但是當列表資料非常大的時候，我們不難發現，頁面需要載入很長時間才能正常顯示出來，這顯然不是我們想要的結果。
那麼如何在資料量很大的時候，還能很快顯示呢？接下來我們將分析並解決這個問題
我們都知道顯示屏的大小是固定的，無論資料量有多少，初看我們也只需要顯示最開始的資料而已，所以我們可以分批次讓資料顯示出來，這樣既不需要長時間的等待，也不會影響資料的顯示。
在此之前，我們需要了解一下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>如此我們就可以看見資料在隨著時間慢慢的往頁面裡新增，此時大量資料列表渲染的問題也就解決了。