0

ここにはある種の webapp があり、もちろん JavaScript と jQuery が組み込まれています。spanロード時に、関数はテキストのすべての文字 (約 150 文字) をラップします。次に、ユーザーは文字を選択でき、確認後、結果が表示されます。すべてが素晴らしくスムーズに機能しますが、最後の部分だけが本当にパフォーマンスを殺します.

結果は 3 つの配列に保存されます。クリックすると、クリックされた要素にクラスを追加する関数が起動します（これが確認です）。

私は次のようにします（配列ごとに3回）：

$.each(myArr, function( i, v ){
    $(v).addClass( "my-class" );
});

このように動作しますが、DOM を頻繁に操作するため、パフォーマンスが低下します。

2.26 GHz と 2 GB RAM を搭載した MacBook を使用していますが、クラスが追加された後、簡単なツールチップなどを実行できません。特に、1 つのアレイが実際に満杯の場合、これはパフォーマンスに悪影響を及ぼします。

私はすでにスクリプトを最適化しようとしました。複数回使用されるすべてのDOMオブジェクトをキャッシュしましたが、これはすべての場合に可能ではありません(私は思う...)。.my-classまた、and#my-idの代わりにspan[class = my-class]andのようなセレクターを使用span[id = my-id]して、すべてを高速化しました。最後の配列部分だけが悪いです。

$.eachこの部分を最適化する方法はありますか？キャッシングか何か？それとも別のテクニックを使用していますか？

スクリプトが超高速であるとは思いませんが、結果が表示された後に簡単なツールチップを追加できるはずです。

4

2 に答える 2

2

問題と思われるのは、多くのブラウザのリフローを引き起こしていることです。これは、DOM 内のオブジェクトに特定の変更を加えるたびに発生します (サイズの変更、削除/追加など)。これを防ぐには、次のことができます。

  • すべてのオブジェクトを含む親オブジェクトを削除することで、すべてのオブジェクトを一度に削除します (これにより 1 つのリフローが発生します)。
  • オブジェクトが DOM の一部ではない間に、必要なすべての変更を行います。
  • 親オブジェクトを DOM に戻します (これにより、再びリフローが発生します)。

親オブジェクトを削除すると視覚的に気を散らす場合は、代わりにディープ クローンを作成し ( var clone = parent.cloneNode(true))、クローンにすべての変更を加えてから、親オブジェクトを置き換えることができます ( parent.parentNode.replaceChild(clone, parent))。オブジェクトに JavaScript イベント リスナーが含まれている場合は、これらをクローン オブジェクトに再バインドする必要があることに注意してください。

于 2012-07-16T20:37:44.750 に答える
0

配列を連結しない理由:

  myArr = myArr[0].concat(myArr[1],myArr[2]); 
  $(myArr).addClass( "my-class" );

もっと速くできると思います。

于 2012-07-16T19:56:33.397 に答える