1. ホーム
  2. ジャバスクリプト

[解決済み】<script defer="defer">は具体的にどのように機能するのでしょうか?

2022-04-09 21:14:21

質問

私はいくつかの <script> 要素に依存し、そのうちのいくつかのコードは他の <script> 要素で構成されています。私が見たのは defer 属性は、コードブロックの実行を延期させることができるので、ここで便利に使うことができます。

試しにChromeで実行してみました。 http://jsfiddle.net/xXZMN/ .

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

しかし、それはアラート 2 - 1 - 3 . なぜ 1 - 2 - 3 ?

解決方法は?

UPDATED 2/19/2016

この回答は古いと思ってください。新しいブラウザのバージョンに関連する情報については、この投稿の他の回答を参照してください。


基本的に、deferはブラウザに、そのスクリプトブロック内のjavascriptを実行する前に、準備が整うまで"待つように指示します。 通常、これは DOM の読み込みが完了し、document.readyState == 4 となった後です。

defer属性はinternet explorerに特有のものです。Windows 7 の Internet Explorer 8 では、JS Fiddle のテストページで私が見ている結果は、1 - 2 - 3 です。

ブラウザによって結果が異なる場合があります。

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

IE は、一般に信じられているよりも頻繁に標準に従っていますが、実際には "defer" 属性は DOM Level 1 仕様で定義されています。 http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html

W3Cのdeferの定義です。 http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

"このブール属性が設定されると、スクリプトが文書コンテンツを生成するつもりがないこと(例えば、javascriptの"document.write"がないこと)、したがってユーザエージェントが解析とレンダリングを継続できることを示すヒントを与えます"。