首页 > Web开发 > 详细

js用计时器加载大量dom

时间:2017-02-25 20:12:59      阅读:202      评论:0      收藏:0      [点我收藏+]

改进前:

 <table><tbody></tbody></table>
var tbody=document.getElementsByTagName("tbody")[0];
        for(var i=0;i<20000;i++){
            var tr=document.createElement("tr");
            for(var t=0;t<6;t++){
                var td=document.createElement("td");
                td.appendChild(document.createTextNode(i+","+t));
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }

 改进后:

   var rowCount=20000;
      var divideInto=100;
      var chunkSize=rowCount/divideInto;
      var iteration=0;


        var tbody=document.getElementsByTagName("tbody")[0];

        setTimeout(function generateRows() {
            var base=(chunkSize)*iteration;
                for (var i = 0; i < chunkSize; i++) {
                    var tr = document.createElement("tr");
                    for (var t = 0; t < 6; t++) {
                        var td = document.createElement("td");
                        td.appendChild(document.createTextNode(
                            (i+base) + "," + t+","+iteration
                            )
                        );
                        tr.appendChild(td);
                    }
                    tbody.appendChild(tr);
                }
                iteration++;
                if(iteration<divideInto){
                    setTimeout(generateRows,50);
                }
            }, 0);

 

js用计时器加载大量dom

原文:http://www.cnblogs.com/gaocong/p/6442416.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!