14

私はJavaScriptを多用する大規模なウェブサイトを構築しています。すべてのコンテンツがトラフに読み込まれています。Facebookajaxと非常によく似ています。さまざまなページがたくさんあるので、JavaScriptがたくさん必要なので、分割することを考えました。私のスクリプトをセクションに入れると、各ページに独自のスクリプトファイルがあります。

ロードは簡単です。ページごとに新しいファイルをロードするだけですが、ユーザーが100の異なるページを通過し、100の異なるスクリプトファイルをロードするとどうなるかが心配です。

現時点では、私のWebサイトにはそれほど多くのページがありませんが、将来的には100近くの固有のページに成長すると確信しています。

では、遅いコンピューターを使用しているユーザーはどうなるでしょうか。更新がないので、かなり遅くなり始めると思います。私が読んだことから、ロードされたスクリプトファイルからすべてのイベントとデータを簡単な方法でアンロードすることは不可能です。それを試してみると、それを行うのに多くの時間と労力がかかる可能性があります。

だから私の質問は、私はそれをそのままにしておくべきですか、それともそれについて何かをしようとするべきですか？私は現在jquery、いくつかのプラグインを使用しています。平均的なファイルは、ほとんどがclickイベントとajax呼び出しを含む約50〜200行のコードになると推測する必要があります。

各ページオブジェクトには、クラスごとに独自のプレフィックスがあります。例：home_header、login_header

onClickしたがって、イベントリスナーと同様のものとの間に競合があってはなりません。

編集私はこの質問に賞金を設定しています、私はもっと意見を聞きたいです。

4

3 に答える 3

7

AJAXを使用しているからといって、メモリ使用量に関して自動的に警告音が鳴るわけではありません...メモリリークの原因となる種類についてもっと心配し、適切に破壊および構築するようにしてください。

原則として、大規模なシステムでは、後日またはページのアンロード時に破棄したいすべてのアイテム（イベントリスナー、大きな属性、またはオブジェクト構造）をすべて名前空間でインデックス付けして追跡するヘルパーコンストラクターを作成する傾向があります。 。次に、特定のセクションまたはエンティティを終了したら、ヘルパーシステム（GarbageMonkey:)と呼びます）に特定の名前空間をクリアするように依頼します。

  1. イベントの場合はバインドを解除します
  2. 属性の場合は設定を解除します
  3. 配列/オブジェクトの場合、各キーをスキャンして設定を解除し、サブ要素に対しても実行できます
  4. 要素の場合、コンテンツを可能な限り削除してクリーンアップします

明らかに、上記が機能するためには、削除したいデータへの参照を保持できる変数を残しておくことに注意する必要があります。つまり、これは、ガベージコレクションとは何か、クロージャとは何かを認識することを意味します。そしてそれらの間でどのように彼らは変数を永遠に生き続けることができるのか！..または少なくともブラウザ/タブが破壊されるまで。また、オブジェクトにアクセスできる任意のスコープでキーを削除できるため、varsではなくオブジェクト構造を使用することを意味しますが、varsでは削除できません。

だからこれを行う：

var data = {}, methods = {}, events = {};

methods.aTestMethod = function(){
  /// by assigning properties to an object, you can easily remove them later
  data.value1 = 123;
  data.value2 = 456;
  data.value3 = 789;
}

これの代わりに：

var value1, value2, value3;

var aTestMethod = function(){
  value1 = 123;
  value2 = 456;
  value3 = 789;
}

理由は、上記で後でこれを行うことができるためです。

var i;
for( i in methods ){ delete methods[i]; }
for( i in data ){ delete data[i]; }

しかし、これを行うことはできません：

delete value1;
delete value2;
delete value3;

methods明らかに、上記は、またはのいずれかのサブ要素を直接指す参照からユーザーを保護しませんdata。ただし、コード内でオブジェクトmethodsとdataオブジェクトのみを渡し、イベントリスナーとしてのメソッドのアタッチに関して整理されている場合は、不正な参照が発生したとしても、（削除した後は）空のオブジェクトのみを指す必要があります。内容です）。

于 2012-10-10T10:59:47.777 に答える
6

変数をリサイクルし、グローバルスコープを汚染しない場合は、正しい方向に進んでいます。しかし、あなたの質問に関しては、それが実際的な懸念であるかどうかを最初に確認する必要があります。

これはプロファイラーで確認および監視できます-すぐに使用できるChromeはかなり適切です。URLを入力するだけabout:memoryで、タブごとの内訳が表示され、ブラウザー間のメモリ使用量を比較することもできます。自動テストシナリオを設定している場合（または100ページを手動でナビゲートする場合）、そのようなプロファイリングにより、Webサイトに重大な問題があるかどうかがわかります。

于 2012-10-07T23:57:48.813 に答える
2

世話をする2つの異なることがあります：

-メモリ使用量

-メモリリーク

長時間実行されるWebアプリの場合、メモリリークは絶対に回避する必要があります。そうしないと、ユーザーはブラウザのクラッシュを経験することになります。メモリ使用量を監視するには、Process Explorerをダウンロードできます： http ：//technet.microsoft.com/en-us/sysinternals/bb896653.aspx

すべてのブラウザプラグインを無効にしてからアプリを使用し、繰り返しタスクを実行します。メモリ使用量が増えると、リークが発生します。IE7-IE8は、最新のブラウザーよりもはるかに簡単にリークし、デバッグがはるかに難しいため、ブラウザーの互換性を最小限に抑える方法を知っておくと便利です。

メモリ使用量については、アプリの重量を減らすのに役立つことがいくつかあります。

  • dom要素をループしてイベントハンドラー関数をアタッチする代わりに、イベント委任を使用します。EDは本当にここで黄金の銃です。

  • IE 7/8の場合、varの無効化が必要でしたが、それでも最新のブラウザーには役立つと思います（テストが必要です）。そのためには、関数に名前を付けて、メモリから削除できるようにする必要があります。（これに関する詳細については、pebblの回答を参照してください）

  • DOMサイズの制御を維持します。機能にノードが追加された場合、この機能が使用されなくなったときにもノードを削除する必要があります。

  • すべてのコンポーネントに、アンロードを処理するいくつかのteardown（）メソッドを追加します。

わかりました、申し訳ありませんが、ここでは少し速すぎますが、知っておくと便利です：

  1. 最小のブラウザは何ですか

  2. リークを検出した場合

  3. EDが十分な解決策である場合（多くの場合そうです）

于 2012-10-10T14:31:37.193 に答える