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

Script performace - script crashing the browser

本文关键字：脚本 崩溃 浏览器 性能      更新时间：2023-09-26

我有一个脚本，它调用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进行分析):

  1. 我删除了所有的连接和[3]。函数耗时0.5s。
  2. 我只删除了[3]。函数耗时1.5s。
  3. 但是如果我添加[3]，我的函数需要15.5s(!!)。

我能做些什么来改善它?

谢谢!

由于浏览器需要解析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;}

不知道是否有帮助，但是:

  1. 使用javascript创建一个元素(例如:var el = document.createElement('span'))
  2. 设置元素innerHTML(例如:el。innerHTML = resultsTable)
  3. 将其附加到
    4. 页面
相关文章：