2012-01-05 21 views
4

これは、ベストプラクティスに関するさらに多くの質問です。 WebアプリケーションでMVCのようなデザインパターンを適用しようとすると、私はViewを更新するためにどうすればいいのか不思議に思うことがよくあります。複数の小さなDOM操作対1つの大きなDOM操作

たとえば、X個の要素を持つView_1を更新する場合は、

A:各X要素を繰り返し、どの要素を更新する必要があるかを把握し、DOMの変更を非常に細かく適用する方が良いですか?

または

B:この全体の表示およびそのすべてを囲む要素のマークアップを再生成し、1回のDOM操作でView_1のルート要素を交換するモデルや他のいくつかのデータ構造によって供給されたデータを使用していますか?

私が間違っている場合は私を修正してください。レンダリングエンジンは通常、DOMの大きなチャンクを1回で置き換える方が、複数の小さなDOM操作よりも効率的です。そうであれば、アプローチBは優れています。しかし、テンプレートエンジンを使用していても、変更されていないビューの部分のマークアップを書き換えることは避けがたいことがあります。

名前を変更する前にプロジェクトBespinのソースコードを調べました。私は、ゲームがフレームをどのように管理するかと同じように、DOM操作がキューに入れられ、一定の時間間隔で適用されるある種のレンダリングループメカニズムを実装したことをはっきりと覚えています。これはアプローチAに似ています。このアプローチの背後にある理論的根拠も見ることができます。このような方法で適用される小さなDOM操作は、UIを応答的に保ちます(特にWebテキストエディタにとって重要です)。このようにして、変更が必要な要素を更新するだけで、アプリケーションをより効率的にすることができます。静的テキストと美的要素はそのまま残ることができます。

これは私の両論です。皆さんはどう思いますか?私たちは、どこかで幸せな媒体を探していますか、あるいは1つのアプローチはそれ以上に優れていますか?

また、この特定のトピックに関する良い本/論文/サイトはありますか?

(のが問題のウェブアプリは、多くの動的更新と重いの相互作用であると仮定しましょう)

答えて

0

、I私は最終的に2つのアプローチの間で大きなバランスを見つけたと思う:仮想DOM

vild、Elm、mithril.jsのような図書館は、実際のDOMの薄い抽象化を追跡し、変更が必要なものを見つけ出し、可能な限り小さなDOM変更を適用しようとします。

https://github.com/Matt-Esch/virtual-dom/tree/master/vdom

2

これは、レンダリングエンジンが通常より速く、複数の小さな変化よりも大きなチャンクの変化を扱うことは事実です。

tl; dr:bespinの方法は理想的であり、できればそれは作業者で行うこと。

変更量の大きさに応じて、長時間実行されているJSがUIをロックするため、ワーカーを開始してワーカーの変更を計算しようとする可能性があります。

  1. DOMツリーの一部と親IDを持つオブジェクトを作成します。労働者
  2. に文字列化されたオブジェクトで
  3. 文字列化オブジェクトスタート
  4. JSON
  5. に労働者
  6. パス文字列を受信して​​解析します。
  7. 渡されたDOMツリーの必要な部分をすべて変更する作業。
  8. オブジェクトをもう一度ストライ化します。
  9. オブジェクトをメインスレッドに戻します。
  10. 新しいDOMツリーを解析して抽出します。
  11. 再度DOMに挿入します。

多くの変更と小さなツリーがある場合、これは速くなります。それが大きなツリーであり、実際のDOMツリーのコピーでローカルで変更を行うだけのほうが速く、一度にDOMを更新することはほとんどありません。

また、ページの速度に関するグーグルのサイトをお読みください。

https://code.google.com/speed/articles/

そして特にこの記事:様々なウェブ技術での作業の3年後

https://code.google.com/speed/articles/javascript-dom.html