Question

我在js中有脚本生成带有1k元素的html表。

脚本花了2~s进行生成。

我如何才能提高它的表现？

这是我的剧本：

var
i = 0,
larr = [],
lvls = [/* 1k int's */];
while (1000!==i) {
   larr[i]=lvls[i]+' '+(++i);
}
lvls = [];

var lvl = document.getElementById('lvl');

lvl.innerHTML = `<table id="levels">
<tr>
  <th>LvL</th><th>Experience</th>
</tr>`+
larr.join(',')
.replace(/(\d+)\s(\d+),?/g, `<tr><td>$2</td><td>$1</td></tr>`)
.replace(/,/g, ``)
+`</table>`;
larr = [];

这里完整的脚本： http://codepen.io/anon/pen/NNZabz

聚苯乙烯。我想使用唯一的js;我不希望在服务器上存储结果。

Answer 1

通常，innerHTML缺乏性能。我建议生成元素，并将它们附加到表元素。我也完全摆脱了拉尔，因为它看起来没必要。

您也可以将该部分代码放入while循环中。

var i = 0,
lvls = [];
var lvl = document.getElementById('lvl');
//Make a table
var table = document.createElement('table');
table.id = 'levels';
//Add that header HTML
table.innerHTML = '<tr><th>LvL</th><th>Experience</th></tr>'

//Add that to the lvl element so it renders
lvl.appendChild(table);

var d = document.createDocumentFragment();

//Execute your level creating loop while appending children to the fragment
while (1000!==i) {
    var _tr = document.createElement('tr');
    var _t1 = document.createElement('td');
    var _t2 = document.createElement('td');
    _tr.appendChild(_t1);
    _tr.appendChild(_t2);
    _t1.innerHTML = lvls[i];
    _t1.innerHTML = ++i;
    d.appendChild(_tr);
}

//Add the document fragment to the table
table.appendChild(d);

基于快速测试，这将在~200ms执行

优化生成js中的html表

1 个答案: