zoukankan      html  css  js  c++  java
  • js用计时器加载大量dom

    改进前:

     <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);
  • 相关阅读:
    多态
    java8的十大新特性
    Floyd最短路径算法
    ES6(六)函数扩展
    ES6(五)数组扩展
    ES6(四)数值扩展
    ES6(一)解构赋值
    store封装
    ipad方案
    pyinstaller编译打包为pyd
  • 原文地址:https://www.cnblogs.com/gaocong/p/6442416.html
Copyright © 2011-2022 走看看