Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

<script>要素のdefer属性、async属性による外部JavaScriptの非同期読み込み

More than 3 years have passed since last update.

ディップ Advent Calendar 2017 の5日目です。

JavaScriptはその処理内容自体もパフォーマンスチューニングの対象になりますが、HTML側での<script>タグの書き方も大事です。

レンダリング前のプロセス

image.png

ブラウザが描画の前にやっていること

ブラウザはHTMLをサーバーからダウンロードすると、その内容をパース(解析)してDOMツリー(文書構造の内部表現)を構築する。

<script>タグによるパースの中断

<script src="foo.js"></script>

HTMLパーサーは、パースの途中で<script>タグがあるとそのスクリプトを実行し終わるまで一時的にパースを中断する。
src属性がある場合(外部JavaScript)はサーバーにリクエストし、ダウンロードして実行するので、その分中断時間が長くなる。
<script>タグを</body>の前に記述するのがセオリーなのはこのため。

なぜパースが中断されるのか

JavaScriptのdocument.write()メソッドは、その場にHTMLを書き出す機能を持つ。
そのためこのメソッドが実行されると、パースの結果生成されるDOMツリーの構造に影響を与えてしまう。
スクリプト内にdocument.write()メソッドが使われているかどうかはスクリプトの内容を見なければ分からないため、<script>タグの位置でパースを一時的に中断して、スクリプトの内容を取得・解析する。

<script>要素のdefer属性・async属性

<script src="foo.js" defer></script>
<script src="bar.js" async></script>

src属性を持つ<script>要素にdefer属性またはasync属性を付与することにより、パースが中断されなくなる
その代わり、そのスクリプト内に記述されたdocument.write()メソッドは無視されるようになる。
そのスクリプト内でdocument.write()メソッドが実行されない事が保証されることで、HTMLパーサーはパースを続行できる。

defer属性とasync属性の使い分け

defer属性

スクリプトが<script>要素の順に実行されることが保証される。
HTMLのパースは中断されないが、実行されるのはDOMツリー構築後であることに注意。
外部のJSライブラリ(jQueryとか)の機能を使ったJSファイルやプラグイン等、スクリプト間に依存関係がある場合にはこちらを指定する。

DOMツリー構築完了後、常にscript1 → script2の順に実行される

<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

async属性

スクリプトが<script>要素の順に実行されることが保証されない。
スクリプトのダウンロードが終わると直ちにコンパイル&実行されるため、スクリプト間の依存関係が無い場合はこちらの方が高速。

ダウンロードが完了した順に実行される

<script src="script1.js" async></script>
<script src="script2.js" async></script>

それでは、残り僅かになった酉年を大切にお過ごしください!

FeET
dip-net
ディップ株式会社は「バイトル」「はたらこねっと」などの求人情報サービスをはじめ、人工知能専門メディア「AINOW」、スタートアップ専門メディア「スタートアップタイムズ」、アニメなどの舞台を紹介するサイト「聖地巡礼マップ」といった新しい分野のサービスを自社で開発・運営しています。
https://www.dip-net.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away