私は、いくつかのサブモジュールを持つ非常に大きなアプリケーションに取り組んでいます。各サブモジュールは、多くのパネルと UI コンポーネントを備えた複雑な機能を持つことができます。以前は単一ページ アプリケーションとして小規模なプロジェクトを行ったことがありましたが、今回は、ユーザーが多くのモジュールで作業を続けると、DOM が長時間更新されないという事実が心配でした。
Facebook の運用方法を分析すると、ほとんどの場合、単一ページのアプリとして機能することがわかります。しかし、ときどき、ユーザーのアクションで DOM 全体を更新します (明らかに、ランダムまたはユーザー アクティビティ カウントに基づいています)。
DOM のパフォーマンスを犠牲にすることなく、単一ページのような大規模なアプリケーションを作成する方法に関するパターンやベスト プラクティスはありますか?
(メモリフットプリントを低く抑えるためのコーディングテクニックを探しているわけではありません..アプリケーション全体の設計アプローチを探しています)
ページを更新するのは恥ではありません。アプリケーションは厳密に単一ページである必要はありません。
ページにコントロールがある場合、それらのアクションはそのページ内に含まれたままにする必要があります。しかし、ユーザーがアプリケーションのまったく別の部分に移動した場合、その特定のページに単純にナビゲートできない理由はありません。
innerHTML = ''変更が発生する直前に、変更する必要があるDOM ノードまたはパネルの設定を破棄しても問題ありません。UI要素には、destroyまたは同様の機能があると思います。
また、パネルの機能に関連するすべての JavaScript 変数の設定を解除することも検討してください。これはクリアする必要があります。
モジュールのライフサイクルを制御するアプリケーションコアを持つことは常に良いことです。そして、各モジュールには、launch()、destroy() などの適切に定義されたインターフェイス、または意味のあるものがあります。したがって、destroy() 関数が呼び出されると、アプリ データを格納する html と Javascript オブジェクトが空になります。Nicholas Zakas は、大規模な Javascript アプリケーションに関する優れたプレゼンテーションを行っています。それが役に立てば幸い。