遅延非同期ローディングJavaScript


Webサイトのインタラクションを強化するために、jQuery、ExtJS、または自分で作成したJSクラスライブラリを使用することがよくあります.これらのファイルは通常、ページの外部ファイルに保存され、体積が大きく、ページのロードに時間がかかり、後のソースのロードを阻害します.
最近Google Analytics統計コードを見ていると、Googleは直接<script src="..."></script>の形式でjsファイルをロードするのではなく、非同期ロードの方法を採用していることがわかりました.
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    //var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

まずscriptラベルを作成し、asyncプロパティを非同期でロードできるようにしてから、ロードするjsファイルのパスを指定します.上記のコードが実行されると、ページヘッダには次の行が表示されます.
<script src="http://www.google-analytics.com/ga.js" async="" type="text/javascript"></script>

Google Analyticsの統計コードを変更して、私が普段やっているプロジェクトで使用できるようにします.
(function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://CodeCTO.com/script.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();

非同期ロードを有効にする前後の滝図を比較することができます.
....
asyncプロパティが使用されていない場合、後続のリソースはjsファイルのロードが完了してからロードを開始する必要があります.
asyncプロパティを使用すると、ページ上の2つのリソースを同時にロードできます.
注意:asyncはHTML 5のプロパティであり、ブラウザはHTML 5をサポートしなければ効果がありません.
もう1つのケースでは、jsファイルをこんなに早くページにロードする必要がない場合があります.どうすればいいですか?以前書いたJavaScriptイベントリスニングバインディングを参考にして、jsファイルをページのすべての内容を完全にロードしてからロードすることができます.
(function() {
    function async_load(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://CodeCTO.com/script.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent){
        window.attachEvent('onload', async_load);
    }else{
        window.addEventListener('load', async_load, false);
    }
})();

この方法を使用すると、jsファイルは左右のリソースのロードが完了した後、ロードを開始します.
もちろん、この方法にはもう一つの弊害があります.ページ上の外部リソース(例えば画像)が非常に多い場合、このjsファイルはロードを開始するのに長い間待たなければならない可能性があります.どうやってこの問題を解決しますか?jsに詳しい学生は、解決策を考えていると信じています.あるいは、jQueryの$(document).ready()の方法を参考にすることができます.