腳本性能 - 腳本崩潰瀏覽器

我有一個腳本調用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 +螢火蟲紋）：

我刪除了所有的串聯和[3]。功能花了0.5秒。
我只刪除了[3]。該功能耗時1.5秒。
但是，如果我添加[3]我的功能需要15.5s（!!!）。

我該怎麼做才能改善它？

謝謝！

來源

2011-07-07 Luiz Fernando

由於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;}

來源

2011-07-07 15:23:43 Alex

不知道是否可以幫助，但：

使用JavaScript（Ex.:var EL =使用document.createElement（ '跨'））創建一個元素
設置元素的innerHTML（例：el.innerHTML = resultsTable）
追加到頁面

來源

2011-07-07 15:25:47 Mikhas

關於VASH的解決方案，頻繁的DOM樹的修改花費更多的時間和可能推出大量的事件。 – Mikhas

根據瀏覽器有關這個問題的不同，看看這裏：http://andrew.hedges.name/experiments/innerhtml/ – Alex

事實上。我也會使用文檔根目錄以外的其他節點添加此節點。 – Mikhas

腳本性能 - 腳本崩潰瀏覽器

回答

相關問題