37

この質問は、どのブラウザが<script async ="async"/>をサポートしているのかという正接のようなものです。。

最近、次のようなことを行うスクリプトをいくつか見ました。

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://www.example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(s);

これは、スクリプトをDOMに動的に追加する一般的な方法であり、SteveSoudersの著書「EvenFasterWeb Sites 」のIIRCは、すべての最新のブラウザーにスクリプトを非同期でロードするように促します（つまり、ページのレンダリングや後続のアセットのダウンロードをブロックしません）。 。

私がその点で正しければ、そのs.async = true声明は何か意味がありますか？動的に追加されたスクリプトはすでに非同期ダウンロードをトリガーするはずなので、そのプロパティをサポートするブラウザーであっても、冗長ではないでしょうか。

4

4 に答える 4

24

問題はs.async = true、動的に挿入されたスクリプトを使用できるか、またはこれらがすでに非同期でロードされているかどうかです。答えは、ここで説明されているように、すべてのブラウザに非同期で読み込まれるわけではないということです（リンクを提供してくれたMarkus Olssonに感謝します）

スクリプトが挿入されたスクリプトは、IEとWebKitでは非同期に実行されますが、Operaと4.0より前のFirefoxでは同期的に実行されます。Firefox 4.0では、スクリプトで作成されたスクリプトの非同期DOMプロパティはデフォルトでtrueに設定されているため、デフォルトの動作はIEおよびWebKitの動作と一致します。

非同期読み込みをサポートasyncしているがデフォルトではないブラウザ（Firefox 3.6など）ではasync = true、違いが生じます。

（上記のリンクは、Firefox3.6で使用されるレイアウトエンジンであるGecko1.9.2で非同期がサ​​ポートされていることを確認しています）

于 2011-03-01T21:37:57.897 に答える
20

仕様（現在）では、パーサーが挿入されていないscript要素は非同期であると規定されています。プロパティは、パーサーが挿入されていない要素とは無関係です。asyncscript

3つ目は、要素が「強制非同期」になるかどうかを示すフラグです。最初に、script要素にはこのフラグを設定する必要があります。script挿入する要素のHTMLパーサーとXMLパーサーによって設定されません。さらに、「force-async」フラグが設定されているスクリプト要素にasynccontent属性が追加されている場合は常に、要素の「force-async」フラグを設定解除する必要があります。

もちろん、asynccontent属性があるということは、スクリプトが非同期で実行されることを意味します。仕様言語は、スクリプトの同期実行を強制する機会を残しているようです（属性を設定してから削除することにより）が、実際には機能せず、仕様が少しあいまいになっている可能性があります。パーサーが挿入されscriptていない要素は非同期です。

この指定された動作は、IEとChromeが常に行っていることであり、Firefoxは何年も行っており、現在のOperaも行っています（上記のリンクの回答の古い動作からいつ変更されたかはわかりません）。

簡単にテストできます。

var script = document.createElement("script");
script.src = "script.js";
console.log("a");
document.body.appendChild(script);
console.log("b");

...ありscript.jsながら

console.log("script loaded");

...ログに記録します

a
b
スクリプトがロードされました
于 2017-04-14T14:18:13.650 に答える
3

おもしろい-私は自分の仮定が間違っていたことがわかったと思います。

jQuery開発者フォーラムのこのスレッドに基づく：

http://forum.jquery.com/topic/jquery-ajax-async-vs-html5-script-async

async少なくともFirefox（および潜在的にOperaですが、まだプロパティをサポートしていません）では、プロパティが動的に追加されたスクリプトに影響を与えることが発見されたようです。

フォーラムのスレッドは、Googleの非同期追跡コードの実装も引用しています。これasyncは、適切なコンテキストでプロパティを使用しているように見えますが、実際には構文が間違っているように見えます。Googleは以下を使用します：

ga.async = true;

どうやらそれがうまくいかないとき。適切な方法は、次のいずれかを使用することです。

ga.async = 'async';

また

ga.setAttribute('async', 'async');

したがって、私の現在の理解に基づくと、すべてのブラウザーが、すべての場合にDOMに挿入された直後に動的に追加されたスクリプトを実際に実行するわけではありません。Firefox（そして最終的にはOpera）はasync、これが常に発生するようにプロパティを設定する必要があります。

ここでのFirefoxの実装に関する詳細情報async：

https://bugzilla.mozilla.org/show_bug.cgi?id=503481

于 2010-08-10T03:47:56.240 に答える
1

私はあなたが正しいと信じています。

スティーブ自身の例では、スクリプトタグをhead要素にアタッチする前にasync属性を設定していません。

非同期属性についての私の理解は、それが、スクリプトのロードを停止する代わりにレンダリングを続行できるように、document.writeを使用してページを操作するつもりがないことをブラウザーに通知する方法であるということです。document.write / asyncの問題についてもう少し詳しく説明している、mdcのscript要素のドキュメントを参照してください。

あなたのテクニックでは、ページの存続期間のどこにスクリプトがロードされるかを知る方法がないので、とにかくdocument.writeを使用すべきではないことに注意してください。

于 2010-08-05T01:14:55.467 に答える