3

したがって、私のページには、サイトにアクセスすると実際にロードする必要のない小さなスクリプトがいくつかあります。実際、ユーザーはセッション全体でそれらをまったく必要としない場合があります。

また、これによれば、http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJSも良い習慣ではありません。

たとえば、現在、「DOMの準備ができたら」にすべてがあります。

$(function() {
 // most of the code of which is not needed
});

Dom ready 内にコードを配置しないと、ほとんどの場合実行できません。そこで、スニペットごとに個別の機能を実行することを考えました。

例:

function snippet1() {
   // Code here
}

そのスニペットが必要なときは、必要なときにマウスクリックでロードします。（常にマウスクリックとは限りません。何をロードする必要があるかによって異なります）。

例えば：

$('#button1').click(function() {
  snippet1();
});

だから私の質問は:これは関数を非同期にロードする方法ですか?それでページのロード時間を短縮しますか、それとももっと良い方法がありますか? 私はこれを私の例のどこでも読んだことがありません。

非同期読み込みについては認識していますが、キャッシュされる 1 つの js ファイルにすべての関数を組み合わせることができるため、ここではそれを選択しないことに注意してください。そのため、ページの読み込み時間は、毎回非同期の js ファイルを読み込むよりも短くなります。

4

3 に答える 3

6

あなたはいくつかのものを混ぜています：

  1. ページの読み込み時間
  2. JavaScript 解析時間 - スクリプトが読み込まれた後、解析する必要があります (エラー チェック、バイト コードへのコンパイルなど)。
  3. 関数実行時間

スクリプトを分割したくないため、ページの読み込み時間についてはあまりできません。常に必要な部分と、めったに必要とされない「オプション」の部分の 2 つの部分に分割することを検討してください。バックグラウンドでまれな機能をロードします。

サイトに一度アクセスし、ブラウザがファイルをキャッシュできることを確認した後は、ページの読み込み時間がかなり遅くなることに注意してください。

解析時間を短縮したい場合は、次の 2 つのオプションがあります。

  1. 必要のないパーツはロードしないでください。
  2. スクリプトを圧縮します。Google には、そのための優れたツールがあります。 Closure Compilerです。スクリプトを高速化するだけでなく、多くの一般的な間違いもチェックします。

最後の部分は実行時間です。これらは、関数がまったく呼び出されず、多くのことを行う場合にのみ関連します。あなたの場合、この点は無視してよいと思います。

于 2012-01-13T14:23:55.743 に答える
1

はい、可能な限りオブジェクト、関数などをdocument.readyラッパーの外で定義する必要があります。一部の開発者は、ラッパーの外側ですべてを完全に定義し、init()ラッパー内の関数を呼び出して他のすべてをロードします。私はそのような開発者の 1 人です。

非同期に関しては、これは真の非同期読み込みを行いませんが、ページの読み込みで行う作業が大幅に減るため、ページが高速化されます。

一般に、requireJS や yepnope などのスクリプト ローダーを使用していない場合は、すべてのスクリプト参照、または少なくともすぐに実行する必要のないスクリプト参照を本文の最後に配置することをお勧めします。とにかく、ページの読み込み後まで実行されないリソースの前にページがレンダリングされます。

于 2012-01-13T14:22:04.343 に答える
1

RequireJS ( http://requirejs.org/ ) または同様のライブラリを使用して、すべての追加リソースをロードします。

すぐに必要のないものはすべて別のスクリプトに入れて、メイン コンテンツが読み込まれた後に読み込みます。

于 2012-01-13T14:22:27.397 に答える