0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

<script>のdefer属性、async属性の意味

Posted at

#htmlから外部にあるjsファイルを読み込みたいときの適切な処理
javascriptについてMDN Web Docsで勉強したことを振り返るために投稿。

##htmlとscriptは適切なタイミングで読み込まないとダメ
スクリプトを外部から読み込むときにはhtmlのscriptタグにに属性を追加することがエラーを回避できる。

##defer属性とasync属性
この二つの属性がスクリプトのブロッキングを回避するやつ

###async属性
ページのレンダリングをブロックせずにスクリプトをダウンロードして、ダウンロードし終わると直ちに実行する。
複数のスクリプトがある場合特定の順序で実行される保証はなし、ダウンロード完了順?
ページの表示を邪魔しない。スクリプト同士が依存していない場合はおすすめ。

###defer属性
ページに現れた順でスクリプトを実行。つまり書かれた順。スクリプト同士が依存しているならこっち、対応するスクリプトは最初に実行するように。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?