スクリプトperformace - スクリプトがブラウザをクラッシュする

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]。そして、終了する、私はこれを行う：

私は時間がこれらの手順は、（クロームとFirefoxの+放火魔とプロファイリング）かかり方法を確認

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

：私はすべての連結を削除

1. と[3]。機能は0.5秒かかりました。
2. 私は[3]だけを削除しました。関数は1.5秒かかりました。
3. しかし、[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を使用することで排除することができ、もう解析する必要のないたくさんのバイトを節約できます。役立つかもしれないが、場合td {text-align: left;}

Answer 2

わからない：

1. ではJavaScriptを使用して要素（Ex.:varエル=のdocument.createElement（ 'スパン'））を作成し
これをacheiveするには、このようなCSSを追加
2. 設定する要素のinnerHTML（例：el.innerHTML = resultsTableは）
3. はヴァッシュのソリューションについて