javascriptファイルの同期ローディングと非同期ローディング

12946 ワード
JavaScript
HTML 4.01のscript属性
charset:オプションです.src導入コードの文字セットを指定します.ほとんどのブラウザはこの値を無視します.defer:bootlean、オプションです.ディレイスクリプトの実行は、スクリプトタグをページbodyタグの下部に置くことに相当し、jsスクリプトはdocumentのDOMContentLoadedの前に実行されます.IEと比較的新しいバージョンのFirefoxを除いて、他のブラウザはサポートしていません.langage:廃棄されました.ほとんどのブラウザはこの値を無視します.src:オプションです.導入された外部コードファイルを指定して、拡張子の名前を制限しません.type:必ず選択します.スクリプトの内容タイプ(MIMEタイプ)を指定します.実際には通常この値を指定しなくてもいいです.ブラウザはデフォルトでtext/javascriptタイプとして解釈して実行します.
 
HTML 5のscript属性:
scriptタグはHTML 5においてHTML 5の新規規格で定義された属性以外に、HTML 4.01と比較してlangguage属性を除去し、type属性を選択的に修正し(デフォルトtext/javascript)、もう一つの属性asyncを追加しました.
async:bootleanは、プロパティの役割は、スクリプトが非同期で実行されるかどうかを定義し、trueまたはfalseを取得します.
asyncをtrueに設定するとdefer属性は無視されます.
 
非同期実行のjsファイルは、document.write()を使用しないと仮定される. ロード中のdocumentに内容を書き込みますので、非同期のjsファイルのロード実行中にdocument.write()を使用しないでください.
 
scriptタグの属性以外に、ページがjsファイルを導入する方式は、そのロードの実行方式に影響します.
  • は、任意のscriptノード(例えば、apped Child(scriptNode)を追加する. ) の方式で導入されたjsファイルはすべて非同期で実行されます. (scriptNode documentに挿入するには、ノードと設定のみを作成します. src はロードされません js. ファイルの(IE 6-9を除く)は、これと同じです. img のプリロードは類比できません.  ,script.typeを特別に設定する必要はありません.もし設定を過ぎたら、javascriptタイプに設定します.そうでなければ、jsファイルをロードしません.
  • .ファイルの「script」タブのコードまたはsrc参照のjsファイルのコードは同期ローディングと実行されています.
  • htmlファイルの「script」タブのコードは、document.write()方式で導入されたjsファイルを使用して、非同期的に実行される
    • です.
  • .ファイルの「script」タブsrc属性が参照するjsファイルのコード内でdocument.write()方式で導入されたjsファイルは同期して実行される
    • である.
  • Imageオブジェクトを使用して、jsファイルを非同期的にプリロードする(実行されません.onloadイベントはトリガされませんが、onerrorをトリガします)
    • 以下のようなやり方をしないでください.jsファイルのロード要求を開始しません.
    divNode.innerHTML=';;
    window.onload イベントはjsファイルにロードしてからトリガされます. )
     
     
    scriptタグが直接コードに埋め込まれても、jsファイルに導入されても、  scriptタグのjsコードは全部解析してから実行します.だから類似したものが現れないでください. 前のscriptタグのコードに変数を使って、後のタブのコードに変数を定義するという間違ったやり方です.
     
    ========================================================================================================
    1、
    ＜スクリプト＞
    //同期ローディング実行コード

    2、
    ＜スクリプト src=「xx.js」>  //同期ローディング実行x.jsのコード
    同期されているので、jsopなどのdocument.wirte()を使って、jsファイルを埋め込み、サーバーからデータを取って、サーバースクリプトでjsコードを出力してdocumentに内容を書き込むことができます.
    3、
    ＜スクリプト＞
    document.write('")   //非同期ローディング実行×.jsのコード

    4、
    ＜スクリプト src=「xx.js」>
    x.jsには以下のコードがあります.
    document.write('>   
    document.write('<\/script>>   
    x.jsと11.js、22.js 同期ローディングと実行です.
    もし x.js、11.js 和 22.jsはscriptノードを挿入する方式で非同期的にロードすると、 11.js 和 22.jsは非同期的にロードされています.
    xx.jsがscriptノード方式で非同期的にロードされた場合、 11.js 和 22.jsはdocument.write(script)方式でロードすれば、11.js 和 22.jsは同期ローディング(最新のブラウザテストを経て、chromeの下で、xx.j非同期ローディング実行はすでにdocument.write()を使用してドキュメントに内容を書き込むことができなくなりましたが、documentローディングプロセスに挿入しない場合は、挿入前にdocument.writeを使用します.ページに対する書き換えを開くと、非同期でロードされたjsはまだ内容を書き込むことができます.たとえば、ページの前のボタンのオンロックコール関数の中のdocument.write(1)は、headNode.apped Child(scriptNode)は、FirefoxとIEはdocumentが閉じる前に書き込めます.
    テスト:11.jsで alert()(最高の方法はサーバースクリプトを使ってjsコードを出力し、出力前にiao数秒遅延します. php:sleep(5);forループを使わないでください.jsエンジンはシングルスレッドで実行されます.任意のコードを継続的に実行すると残りのコードがブロックされます.  , 22.js中  consolie.log()  ,見えます 22.jsのコードがブロックされました.
    5、
    以下のような方式では、xx.jsは、apendChild実行後に非同期的にロードされます.
    var スクリプト = document.creat Element(「script」)
    script.set Attribute(「src」、「X.js」);
    Dcumenrt.getElements ByTagName("head")[0].apendChild(script);
     
    6、Imageオブジェクトを使用して、jsファイルを非同期でプリロードする(実行されない)
    Imageのsrcは値が付けられた時に要求を開始し、ファイルタイプに対して好き嫌いがない(画像はシナリオ動的に作成された場合もあります.例えば、検証コード)ので、jsファイルのurlをイメージ.srcに付与し、jsロード後にブラウザにキャッシュされます.
    var img = new Image(); 
img.onload = function(){ alert(1); } ; //     js   MIME      ，onload          
img.src = 'http://localhost/test/loadjs/try.2.js';
var s = document.createElement("script");
var h = document.getElementsByTagName("head")[0];

//   js
s.src=img.src;
h.appendChild(s);
     ファイルのロードが完了した時に問題があります.標準ではないイメージ.comを使用できます.この属性はchromeとfirefoxの下でファイルローディング中だけfalseです.一方、IE 9のOload後はtrueであり、ロード開始、ロード失敗はfalseであり、IE 8およびIE 8以下ではまだfalseであり、遅延検出が必要であり、また、IEのピクチャオブジェクトはロード後に成功するかどうかにかかわらず、プレースホルダのピクチャサイズが得られ、このサイズにより、trueが検出されたかどうかを検出することができる.ロードプロセスの実行が完了しました.
    var im = new Image();
console.log([1,im.complete,im.width,im.readyState]);
im.onerror=im.onload = function(event){ 
    var e = event||window.event;
        var eventType = e.type;
        var host = this;
    console.log(['callback ',eventType ,host.complete,host.width,host.readyState]);
    setTimeout(function(){// for ie8-
        console.log(['callback delay ',eventType ,host.complete,host.width,host.readyState]);
    },100); 
}
im.src="http://seajs.org/dist/sea.js";
console.log([1,im.complete,im.width,im.readyState]);
     
    IEにおいて、イメージオブジェクトはオンリーadystatechangeイベントがあります.このイベントは画像のロードに成功した後だけ実行されます.jsファイルをロードするとイベントが発生しません.
    var im = new Image();
console.log([im.complete, im.readyState]); // false,uninitialized 
im.onreadystatechange = function(){ 
  console.log([im.complete, im.readyState]); //false,complete 
   setTimeout(function(){ 
          console.log([im.complete, im.readyState]); //true,complete 

    },100);
 }
im.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
     
      
     一つのロード js. ファイル 関数:
    var loadJS = function(url,callback){  
var head = document.getElementsByTagName('head');  
if(head&&head.length){
head = head[0];
}else{
head = document.body;
}

var script = document.createElement('script');   

script.type = "text/javascript";   
head.appendChild( script);

script.onload = script.onreadystatechange = function(){
//script   ，IE    onreadystatechange   , w3c     onload        
//   readyState    IE8    ，W3C     script      onreadystatechange   this.readyState , 
    //        onload     ，    
//(!this.readyState)     W3C   , IE 9     W3C    onload 

if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 
       callback();     
} 
 }//end onreadystatechange 
}
     script.src = url;
     
    第4点のテスト(同期ローディング)を挿入します. alert ロード時のブロックが見えやすいです)
    tryjs.
    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="tryjs.js" 
onload="if(!document.all){console.log('outer js callback, not IE');}" 
onreadystatechange="console.log('outer js callback ',this.readyState,' IE');"></script>


<body>

</body>
</html>
     
    tryjs.js
    console.log('write begin');
document.write('<script src="try.1.js" onreadystatechange="console.log(\'file 1 callback \',this.readyState,\' IE\');" onload="if(!document.all){console.log(\'file 1 callback,NOT IE \');}"><\/script>');
document.write('<script src="try.2.js" onreadystatechange="console.log(\'file 2 callback \',this.readyState,\' IE\');" onload="if(!document.all){console.log(\'file 2 callback,NOT IE \');}"><\/script>');
console.log('write finished');
     
    try.1.js
    console.log('loadjs 1 begin');
console.log('loadjs 1 finished');
     
     
    try.2.js
    console.log('loadjs 2 begin');
console.log('loadjs 2 finished');
     
     
    テスト結果(file) 2 和 file 1 の calback complettee IE 7\8\9の順序は不確定です.
    IE 7:ログ: outer js. calback loading IE ログ: outer js. calback loaded IE ログ: write begin ログ: write finished ログ: outer js. calback complettee IE ログ: file 1 calback loading IE ログ: file 2 calback loading IE ログ: loadjs 1 begin ログ: loadjs 1 finished ログ: loadjs 2 begin ログ: loadjs 2 finished ログ: file 2 calback complettee IE ログ: file 1 calback complettee IE IE 8:ログ: outer js. calback loading IE ログ: outer js. calback loaded IE ログ: write begin ログ: write finished ログ: outer js. calback complettee IE ログ: file 1 calback loading IE ログ: file 2 calback loading IE ログ: loadjs 1 begin ログ: loadjs 1 finished ログ: loadjs 2 begin ログ: loadjs 2 finished ログ: file 2 calback complettee IE ログ: file 1 calback complettee IE IE 9:ログ: write begin ログ: write finished ログ: outer js. calback complettee IE ログ: file 1 calback loading IE ログ: file 2 calback loading IE ログ: loadjs 1 begin ログ: loadjs 1 finished ログ: loadjs 2 begin ログ: loadjs 2 finished ログ: file 1 calback complettee IE ログ: file 2 calback complettee IE FIREFOX:write begin write finishedouter js. カルバック、 not IEloadjs 1 Beginnloadjs 1 finishefile 1 calback,NOT IEloadjs 2 Beginnloadjs 2 finishefile 2 calback,NOT IECHROME:write begin     write finished    outer js. カルバック、 not IE    loadjs 1 begin    loadjs 1 finished    file 1 calback,NOT IE loadjs 2 begin    loadjs 2 finished    file 2 calback,NOT IE
     
    //=====いくつかのテストファイル(これは最近別に測定されたものです)==========================
    files in /test/loadjs/
    http://files.cnblogs.com/ecalf/loadjs.rar
    [小Tip]JavaScript回転整数杯具2則