我有一个来自服务器的 JSON 数组,该数组包含 200 个对象,每个对象包含另外 10 个我想以表格格式显示的对象。起初我正在创建一个 <tr>
对于每次迭代并使用 jQuery 附加一个 <td>
从数组值构建到 <tr>
.这在 Chrome 中花费了大约 30 秒,在 IE 8 中花费了 19 秒。这花费的时间太长了所以我尝试切换到 Array.join()
。方法,我会将构成整个表的每个字符串存储在一个数组中,最后做 $('#myTable').append(textToAppend)
.这实际上比我的第一个版本差了大约 5 秒。
我想将其缩短到 10 秒左右。我有机会吗?如果没有,我将一次添加一行,但我宁愿不这样做。
for(allIndex = 0; allIndex < entries.alumnus.length; allIndex++){
var entry = '<tr id="entry' + allIndex + '" class="entry"></tr>';
$('#content_table').append(entry);
$('#entry' + allIndex).append(($.trim(entries.alumnus[allIndex].title) != '' ?
'<td id="title' + allIndex + '" class="cell"><span class="content">' +
entries.alumnus[allIndex].title + '</span></td>' : '<td width="5%">' +
filler + '</td>'));
.
.
.
.//REST OF ELEMENTS
.
.
.
}
更新:我昨天一定是搞砸了,因为我回去尝试从 DOM 中追加元素,然后在不使用 jQuery 的情况下附加它们,我已经把时间花在了在 Chrome 中为 85 毫秒,在 IE7 中为 450 毫秒!!!你们真棒!!!我给了 user1 答案,因为那个更全面,使用片段并没有真正改变我在 Chrome 中的时间,在 IE7 中增加了大约 20 毫秒。但我仍然感谢@Emre Erkan 的回答,并且会更频繁地使用 :)
最佳答案
最快的看起来像这样:
var oldTable = document.getElementById('example'),
newTable = oldTable.cloneNode(true);
for(var i = 0; i < json_example.length; i++){
var tr = document.createElement('tr');
for(var j = 0; j < json_example[i].length; j++){
var td = document.createElement('td');
td.appendChild(document.createTextNode(json_example[i][j]));
tr.appendChild(td);
}
newTable.appendChild(tr);
}
oldTable.parentNode.replaceChild(newTable, oldTable);
并且应该以毫秒为单位运行。这是一个例子:http://jsfiddle.net/Paulpro/YhQEC/它创建 200 个表行,每个行包含 10 个 td。
您想要使用元素而不是字符串来追加,但是您不想在创建整个结构之前向 DOM 追加任何内容(以避免在循环中重排)。因此,您可以克隆原始表并附加到克隆,然后在循环完成后插入克隆。
通过避免使用 jQuery 并直接与 DOM 交互,您还将获得相当快的速度。
您的代码可能如下所示:
var oldTable = document.getElementById('content_table'),
newTable = oldTable.cloneNode(true),
tr, td;
for(var i = 0; i < entries.alumnus.length.length; i++){
tr = document.createElement('tr');
tr.id = 'entry' + i;
tr.className = 'entry';
if(entries.alumnus[i].title){
td = document.createElement('td');
td.id = 'title' + i;
td.className = 'cell';
var span = document.createElement('span');
span.className = 'content';
span.appendChild(document.createTextNode(entries.alumnus[i].title);
td.appendChild(span);
tr.appendChild(td);
tr.appendChild(createFiller(filler));
}
// REST OF ELEMENTS
newTable.appendChild(tr);
}
oldTable.parentNode.replaceChild(newTable, oldTable);
function createFiller(filler){
var td = document.createElement('td');
td.style.width = '5%';
td.appendChild(document.createTextNode(filler);
return td;
}
关于Javascript 有效地从 JSON 构建表并将其添加到 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8734786/