渲染大量資料，利用setTimeout提升渲染速度
阿新 • • 發佈：2020-12-25
技術標籤：javascriptjavascript
舉個栗子，有一個需求是用js實現渲染一個2萬行6列的表格，我們首先不做程式碼優化，看下效果會怎麼樣，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>渲染table測試</title>
</head>
<body>
<button onclick="renderTableFun()">點選渲染table</ 我們在瀏覽器中看到的效果：瀏覽器等待了一段時間才渲染出來，在此期間瀏覽器像是被卡主了一樣什麼都不能做。
對上面的程式碼做一個優化，使其分幾步完成上面的需求，這樣每次要做的事情就不會太多了。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>渲染table測試</title>
</head>
<body>
<button onclick="renderTableFun()">點選渲染table</button>
<div id="box" class="container"></div>
<script type="text/javascript">
function renderTableFun(){
var boxDom = document.getElementById('box');
var cTable = document.createElement('table');
var index = 0;
//這次我們分5步來完成上面的任務，其實也可以分更多步
var oneStepNum = 4000;
var currentStep = 1;
var renderTable = function renderTable(){
for(var i = 0;i<oneStepNum;i++){
var tr = document.createElement('tr');
for(var j = 0;j<6;j++){
var td = document.createElement('td');
td.innerHTML = index;
tr.appendChild(td);
index++;
};
cTable.appendChild(tr);
};
boxDom.appendChild(cTable);
currentStep++;
if(currentStep>5){
clearTimeout(timer);
return;
};
var timer = setTimeout(renderTable,0);
};
renderTable();//渲染dom
};
</script>
</body>
</html>
我們發現程式碼經過這樣優化之後，dom可以很快就被渲染出來。其思想就是：把一個很耗效能的操作或長時間的操作分解成一些耗效能較少或這耗時少的操作，就不會造成耗時長的程式碼使瀏覽器卡死的情況了，能快速的把頁面先呈現在使用者面前。
其實很多優化程式碼都是採用這種原理做的，比如節流、防抖等。