javascript - 使用 javascript 阻塞浏览器创建具有数百万条记录的 html 表

Question

请在回答或将其标记为重复之前完整阅读我的问题，因为我正在处理问题中的约束。

大家好，Javascript 摇滚明星，

我正在用 javascript 创建一个 html 表格。在表格中，我需要垂直和水平的滚动条。我完成了这部分。这是工作。现在我的问题开始了。当我为表格创建数百万行时，它会阻止我的浏览器。对于几千条记录，它工作正常。

我做了很多谷歌来提高性能，但没有获得任何显着的性能改进。就像一些人建议使用 row.appendChild(cell);我也尝试过使用 Workers。但后来我发现我无法访问 Workers 中的文档对象。 setTimeout 也不足以解决我的问题。这是我创建表格行的代码。

var arr = JSON.parse(rcvReq.responseText);
    var json = arr.abc;
    var columns = [];
    columns = Object.keys(json[0]);
     //Build an array containing Customer records.
    var customers = new Array();
    customers.push(columns);
    for (i = 0; i < json.length; i++) { 
         var dataVal = [];
        for(j = 0; j < columns.length; j++){
             var mytempvar = json[i]; 
            dataVal.push(mytempvar[columns[j]+'']);
        }
        customers.push(dataVal);
    }
    //Create a HTML Table element.
    var table = document.createElement("TABLE");
    var table1 = document.createElement("TABLE");
    table.border = "1";
    //Get the count of columns.
    var columnCount = customers[0].length;
    //Add the header row.
    var row = document.createElement('tr');
    row.className = 'fixed-header';
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = customers[0][i];
        row.appendChild(headerCell);
    }
    table1.appendChild(row);
    //Add the data rows.
     var documentFragment = document.createDocumentFragment();
    for (var i = 1; i < customers.length; i++) {
        row = document.createElement('tr');
        for (var j = 0; j < columnCount; j++) {
            var cellVal = customers[i][j];
                var cell = document.createElement("TD");
                cell.innerHTML = cellVal;
                row.appendChild(cell);
        }
        setTimeout(function(){ }, 1000);
        documentFragment.appendChild(row);
    }
     /* Event of button  */
    var siblings = e.parentNode.children;
    var childOf1stShibling = siblings[0];
    table.appendChild(documentFragment);
    var div = document.createElement("DIV");
    var dvTable = document.getElementById(siblings[1].id +'');
    var dvTable1 = document.getElementById(childOf1stShibling.children[0].id + '');
    dvTable.innerHTML = "";
    dvTable1.innerHTML = "";
    dvTable.appendChild(table);
    dvTable1.appendChild(table1);

约束

1. 没有使用 jquery。只有我会使用 javascript、css 和 html。
2. 不使用第三方插件。
3. 我不能使用分页。
4. 记录的单位是百万而不是千。

请牢记上述限制，提出任何解决方法。 非常感谢。

Answer 1

您可以查看此 JavaScript 的来源 plugin并拿走你需要的部分。整个插件约300行代码，不需要的部分可以去掉。这是 link到他们的 GitHub 仓库。

在他们的演示站点上，他们追加了 50 万行并且滚动很流畅。