所以我必须渲染一个有 1000 行和 1000 列的表格。因此这link ,似乎最好的方法是在 javascript 中构建 HTML 字符串,然后将其一次性插入到 DOM 中。我为此做了一个简单的例子,并将其与其他几种方法进行了比较。最后,这真的是我想出来的最快的方法。但这仍然不够令人满意。所以我的问题是,是否有比以下示例更快的方法。
var startTime = new Date().getTime(),
tableString = "<table>",
body = document.getElementsByTagName('body')[0],
div = document.createElement('div'),
finalResult = 0,
endTime = 0,
result = 0;
for (row = 0; row < 1000; row += 1) {
tableString += "<tr>";
for (col = 0; col < 1000; col += 1) {
tableString += "<td>" + "testing" + "</td>";
}
tableString += "</tr";
}
tableString += "</table>";
div.innerHTML = tableString;
body.appendChild(div);
endTime = new Date().getTime();
console.log(endTime - startTime);
最佳答案
无论使用何种语言,大量的字符串连接都会让您陷入运行时的麻烦。 最快的方法是通过 native JavaScript DOM API,同时在文档片段中构建表格。在函数的末尾,将该文档片段插入到文档中的所需位置。
这样会创建一个包含 1000 行且每行 20 个单元格的表格:
function makeTable() {
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var row = document.createElement('tr');
fragment.appendChild(row);
for (var j = 0; j < 20; j++) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(i.toString() + ', ' + j.toString()));
row.appendChild(cell);
}
}
var target = document.getElementById('target');
target.appendChild(fragment);
}
JSFiddle:http://jsfiddle.net/KbNLb/4/
编辑 刚刚看到您做了 1000x1000 - 那是一百万个单元格,无论如何都会很慢。我真的希望百万表格单元格不是您的实际用例。 ;-)
关于javascript - 改进表格渲染,最快的表格渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18073134/