专栏名称: 前端JavaScript

分享 | 学习 | 交流 | 原创分享是学习的开始；学习不必要从头开始，是从现在开始；交流能沟通你我，提高你的学识；期待你的加入！！！ web前端技术交流，JavaScript，HTML5，CSS3……

[S3-E374]定时器学习：利用定时器分解耗时任务案例

前端JavaScript · 公众号 · Javascript · 2017-06-29 06:35

正文

请到「今天看啥」查看全文

var allLines = 10000;

// 每次渲染的行数

console.time('wd');

for(var i=0; i

var tr = document.createElement('tr');

for(var j=0; j<10; j++){

var td = document.createElement('td');

td.appendChild(document.createTextNode(i+','+j));

tr.appendChild(td);

}

tbody.appendChild(tr);

}

console.timeEnd('wd');

总共耗时180ms, 浏览器已经给出警告！[Violation] 'setTimeout' handler took 53ms。

分批次动态创建

<table> <tbody/></table> <script type="text/javascript"/> var tbody = document.getElementsByTagName('tbody')[0]; var allLines = 10000; // 每次渲染的行数 var everyTimeCreateLines = 80; // 当前行 var currentLine = 0; setTimeout(function renderTable(){ console.time('wd'); for(var i=currentLine; i<currentline i=""> var tr = document.createElement('tr');