必要に応じて関数を呼び出す

Question

私のページには、一度サイトにアクセスすると実際に読み込む必要のない小さなスクリプトがいくつかあり、実際にはセッション全体でそれらを必要としないかもしれません。

また、これによれば、http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJSでもそれは良い習慣ではありません。私は時間のほとんどで、準備ができてその実行可能ではないドム内のコードを配置いけない場合

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

：

だから例えば、現在、私は「DOMの準備」のすべ​​てを持っています。だから私はそれぞれのスニペットのための別々の機能を行うことを考えた。 exmapleについては

：

function snippet1() { 
    // Code here 
} 

と私はそのスニペットを必要なときにマウスクリックで必要なときに、私はそれをロードします。 （いつもmouselcickではなく、私がロードする必要があるものに依存します）。例えば

：

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

だから私の質問がされていますが、これはあなたがページの読み込み時間を減らすか良い方法があるので、非同期ロード機能の仕方ですか？私はどこでもこの例を読んでいないので、私はそれについて考えました。

私はasynchローディングを認識していますが、キャッシュされる1つのjsファイル内のすべての関数を組み合わせることができるので、ここでは私の選択肢ではありませんので、ページ読み込み時間はasynch jsファイル。

Answer 1

あなたはいくつかのことを混合している：時間を解析

1. ページのロード時間
2. はJavaScript - スクリプトがロードされた後、それを解析する必要があり（バイトコードにコンパイルし、エラーチェックを、など）
スクリプトを分割したくないので、あなたがページの読み込み時間について多くを行うことはできません
3. 関数の実行時間

。2つの部分に分割することを検討することができます：常に必要なものと、まれに必要とされない「オプションのもの」です。希少な機能をバックグラウンドでロードします。

サイトが一度訪問されてブラウザがファイルをキャッシュできることを確認した後、ページの読み込み時間がかなり減ることに注意してください。あなたが必要としない

1. ロードしないでくださいパーツ：あなたは、解析時間を短縮したい場合は

   は、次の2つのオプションがあります。

2. スクリプトを圧縮します。 Googleはそのための素晴らしいツールを持っています：Closure Compiler。スクリプトを速くするだけでなく、多くの一般的な間違いをチェックします。

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

Answer 2

可能であれば、document.readyラッパーの外側にオブジェクト、関数などを定義する必要があります。開発者の中には、ラッパーの外にあるものを絶対に定義し、ラッパーの中でinit()関数を呼び出すだけで、他のものをロードするものもあります。私はそのような開発者の一人です。

非同期の場合、これは非同期読み込みには当てはまりませんが、ページ読み込みの作業が少なくなるためページが高速化されます。

一般的に、requireJSやyepnopeのようなスクリプトローダーを使用していない場合は、すべてのスクリプトリファレンス（または少なくとも即座に実行する必要のないもの）をとにかくページが読み込まれるまで実行されないリソースの前にレンダリングされるようにします。

Answer 3

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

メインコンテンツが読み込まれた後ですぐにスクリプトを分割して読み込む必要はありません。