Javascript 脚本性能-脚本使浏览器崩溃

我有一个脚本，它调用CGI来检索XML，解析它，创建一个表并向用户显示这个表。这很简单

我的问题是当这个XML太大时，因为它有时会使用户的浏览器崩溃。 所以我想听听你对我的功能有什么改进的意见

该函数的作用是：

[1] 。它解析XML：

var xmlDoc = req.responseXML;
var rows = xmlDoc.getElementsByTagName('row');
var columns = rows[0].getElementsByTagName('column');

在这之后，我遍历列来创建我的表

[2] 。我正在创建连接字符串的表，如下所示（迭代每行中的每一列）：

我检查了时间如何执行这些步骤（使用chrome和firefox+firebug进行评测）：

我删除了所有的连接和[3]。该函数花费了0.5秒

我只删除了[3]。该功能耗时1.5秒

但是如果我添加[3]，我的函数需要15.5秒（！！！）

我能做些什么来改进它

---

谢谢大家!

由于innerHTML需要由浏览器解析，您可以尝试通过插入DOM对象来加快速度，因此不需要解析大字符串

您可以在表中使用如下内容，而不是添加字符串：

var resultTable = document.getElementById('...'), newRow, newCell;

// ... begin loop:
newRow = document.createElement('tr');
newCell = document.createElement('td');
newCell.textContent = "abc"; // use innerText in IE
newRow.appendChild(newCell);

resultTable.appendChild(newRow);

---

如果您想坚持使用字符串，或者这没有给您带来很多改进，那么您应该优化HTML，例如这里的样式：

可以通过使用CSS消除，并且应该为您节省大量不再需要解析的字节。添加这样的CSS以实现以下目标：

td{text align:left；}

不确定是否有帮助，但：

使用javascript创建元素（例如：var el=document.createElement（'span'））

设置元素innerHTML（例如：el.innerHTML=resultsTable）

将其附加到页面

---

关于Vash的解决方案，频繁修改DOM树会花费更多的时间，并且可能会启动很多事件。根据浏览器的不同，在这个问题上存在差异，请看这里：事实上。我还将使用文档根以外的其他节点来添加这些节点。

document.getElementById('results').innerHTML = resultsTable;
document.getElementById('results').style.display = "";

var resultTable = document.getElementById('...'), newRow, newCell;

// ... begin loop:
newRow = document.createElement('tr');
newCell = document.createElement('td');
newCell.textContent = "abc"; // use innerText in IE
newRow.appendChild(newCell);

resultTable.appendChild(newRow);