Question

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

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

该功能可以：

[1]。它解析XML：

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

在此之后，我遍历列以创建我的表。

[2]。我正在创建连接字符串的表，就像这样（迭代每行中的每一列）：

 tableCells += '<td style="text-align:left">' + value + '</td>';

[3]。最后，我这样做：

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

我检查了这些步骤的时间（使用chrome和firefox + firebug进行分析）：

我删除了所有连接和[3]。功能需要0.5秒。
我只删除了[3]。该功能耗时1.5秒。
但是如果我添加[3]我的功能需要15.5秒（!!!）。

我可以做些什么来改善它？

谢谢！

Answer 1

由于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，例如这里的样式：<td style="text-align:left">可以通过使用CSS来消除，并且应该保存你需要解决许多不需要解析的字节。添加这样的CSS来实现这一点：td {text-align: left;}

Answer 2

不确定是否可以提供帮助，但是：

使用javascript创建元素（例如：var el = document.createElement（'span'））
设置元素innerHTML（例如：el.innerHTML = resultsTable）
将其附加到页面

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

2 个答案: