Javascript Async = true属性

Question

このコードサンプルは、特定の名前のないベンダーのドキュメントにあります。それは、スクリプトを非同期的にロードしてから、そこから関数を呼び出すようです。私は、未定義のチェックが明白なエラーを防止することを認識していますが、これは完全に間違っていませんか？

IE8/9では、正しく動作しますが、LOADER_URLスクリプトがロードされて実行されるまで実行をブロックすると思います。私は非同期のattrbuteをサポートする他の多くのブラウザを信じています。これはインラインブロックがifブロック内のコードを時間の一部だけ実行する結果となります。ドキュメントには、「タグは非同期であり、ページの読み込みが遅くならない」と記載されています。

<script type="text/javascript" src="LOADER_URL" async="true"></script> 
<script type="text/javascript"> 
if (typeof (OBJECT_DEFINED_IN_LOADER_URL) != "undefined") { OBJECT_DEFINED_IN_LOADER_URL.Load(false); } 
</script> 

ドキュメントの以前のバージョンを見ると、async属性の提案はなく、この主張はしませんでした。テクニカルライターが間違いを犯して、すべてのブラウザで適切にテストすることなく "うまくいく"と言ったのですか？ IE < = 9では常に動作します。そして、非同期コードをデバッグするユーバー-楽しいですので、...多分それは彼らのために働いていた...

私の疑惑だこと:)

Answer 1

「真の非同期=」、ブラウザによってサポートされている場合、基本的には意味：ブラウザがしますスクリプトを非同期に読み込み、好きなときに実行します。
したがって、最初のスクリプトの後に2番目のスクリプトが実行される保証はありません。

「asynch js load」は、asynchスクリプトでロードしているオブジェクトを直接使用する他のコードがページにない場合にのみ安全に使用できます。

プロジェクトの1つで同様のエラーが発生したため、すべての証拠がありますが、フィドラーなどで複製するのは簡単ではありません。

質問で提案されているコードは、いつかはい、時にはうまくいきません。

Answer 2

あなたは疑わしいと正しかったです。投稿されたコードは、async属性をサポートしているブラウザで意図したとおりに動作しないことがほとんど保証されています。

は、基本的には3「モードが」あります

1. 非同期属性が存在する場合、スクリプトは、すぐにそれが利用可能であるとして、非同期で実行されます。
2. async属性は存在しないが、defer属性が存在する場合、ページの解析が完了するとスクリプトが実行されます。
3. 属性が存在しない場合、ユーザーエージェントがページの解析を続行する前に、スクリプトがフェッチされてすぐに実行されます。

出典：http://www.w3.org/html/wg/drafts/html/master/scripting-1.html

注：非同期属性値が無視され、属性の単なる存在は、スクリプトが非同期で実行されなければならないことを示しています。したがって、値をfalseに設定することは、それをtrueに設定することと同じです。非同期がtrueの場合

Answer 3

スクリプトが可能とHTMLページとすぐにダウンロードしてexecuteedされます

非同期の場合に同時に

パースされますが

プロセス偽でありますスクリプトのダウンロードと実行はHTMLページ解析の開始前に実行されるため、スクリプトが最初にダウンロードされて実行されている間はHTMLの一時停止は停止します。

Answer 4

これが意味を成すかどうかは、コードの構造に大きく依存します。

ブラウザには特定のファイル（これにはスクリプトが含まれます）がキャッシュされることに注意してください。あなたのスクリプトは、要求に応じて必要なリソース（おそらくrequire.jsのようなもの）を読み込む何らかのライブラリのようです。この非同期コードは、ブラウザにキャッシュ内のすべてのもの（=オブジェクトがすでに存在している）ロードプロセス。

Answer 5

説明したように、HTML5の新機能です。非同期属性が値として 'async'によって割り当てられます。非同期で実行されるスクリプト（外部スクリプトのみ）を指定します。

function include(src, attr, value) 
{ 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.setAttribute(attr, value); 
    script.async = 'async'; 
    script.src = src; 
    head.appendChild(script); 
} 

include('LOADER_URL', 'custom-attr', 'custom-value');