js用计时器加载大量dom

最新推荐文章于 2025-07-19 10:03:47 发布

weixin_33974433

最新推荐文章于 2025-07-19 10:03:47 发布

阅读量72

点赞数

改进前：

 <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);