7

詳細は省きますが、javascript を使用してテーブル内の空白をクリーンアップしています。大量のテキストノードを削除する必要があります。IE9 に関しては、これが私のスクリプトのボトルネックのようです。

以下の方法はすべて機能しますが、非常に遅くなります。

domNode.removeNode(true);
domNode.nodeValue = "";
domNode.parentNode.removeChild(domNode);

一括削除を行う方法や、dom などでそれらを非表示にする方法はありますか。ただ何か速い。

私もテキストノードでこれを試しました：

domNode.innerHTML = '';

それはすぐに実行されますが、テキストノードはそれによって段階的ではないようです。

また、イベント バインディングを保持する必要があるため、テーブル全体で .innerHTML を置き換えることは実際には選択肢のようには見えません。ただし、約 5 倍の速度で実行されます。

更新: 提案されたソリューションの大まかなベンチマーク:

//around 480ms
stripWhitespaceTextNodes(domNode);

//around 640ms
parent.removeChild(domNode);
stripWhitespaceTextNodes(domNode);
parent.insertBefore(domNode, nextNode);

//around 700ms
tables[i].style.visibility = 'hidden';
stripWhitespaceTextNodes(domNode);
tables[i].style.visibility = 'visible';

//around 1140ms
tables[i].style.display = 'none';
stripWhitespaceTextNodes(domNode);
tables[i].style.display = 'block';

これは、1500 行の 1 つのテーブルを含む 4 つのテーブルで行われました。

stripWhitespaceTextNodes() 関数の要点は、テキスト ノードを削除することです。これがボトルネックのようです。これが私のさまざまな試みです。

domNode.parentNode.removeChild(domNode);
domNode.removeNode(true);
domNode.nodeValue = ""; // <-- CURRENTLY THIS ONE IS THE TOP RUNNER
domNode.replaceWholeText('');
domNode.deleteData(0, domNode.length);

var txtNode = document.createTextNode("");
domNode.parentNode.replaceChild(txtNode, domNode);
parent.insertBefore(domNode, nextNode);

//fast but doesn't work
domNode.innerHTML = '';
4

3 に答える 3

6

このための通常のトリックは、大きな変更を行う前に、これらの操作を実行しているコンテナーを DOM から削除し、完了したら元に戻すことです。

したがって、あなたの場合、それは次のようになります。

var table = /* ...get a reference to the table...*/;
var nextNode = table.nextSibling; // May be null, that's fine
var parent = table.parentNode;
parent.removeChild(table);
/* ...clean up the text nodes... */
parent.insertBefore(table, nextNode);

ツリーがページの DOM から切り離されても、イベント ハンドラーはアタッチされたままなので、ツリーが元に戻されたときにそこに存在します。

于 2012-06-06T08:34:44.270 に答える
0

それを行う 1 つの方法は、テーブル全体を複製し、「オフサイト」で操作を行うことです。これは、クローンがDOM上にないクローンに対して操作を行うことを意味します。その後、変更されたクローンでテーブル全体を 1 回置換します。そうすれば、操作が滞ることはありません。

これは、DOM を「複製」し、DOM の外部で操作するための「コンテナ要素」を作成するいくつかの方法を参照する回答です。

于 2012-06-06T08:34:43.200 に答える