ウェブベージで JavaScript ファイルを読み込むためには<script>タグを使うが、その際にasync属性やdefer属性を設定することができる。
そして、これらの属性を使うかどうかで、ウェブベージの表示速度や JavaScript ファイルの実行順序に違いが生まれる。
この記事の内容は、Google Chrome のバージョン83.0.4103.97で動作確認している。
サーバは Node.js のv12.17.0で構築している。
デフォルトでは script タグは逐次処理される
まず、asyncもdeferも設定しないケースについて見てみる。このケースのことを、便宜上defaultと呼ぶことにする。
以下の HTML ファイルと JavaScript ファイルを用意した。
<html> <head lang="en"> <meta charset="utf-8"> </head> <body> <h1>Headline</h1> <script src="/1.js"></script> <p>content</p> <script src="/2.js"></script> </body> </html>
// 1.js console.log(1, window.document.querySelector('p'));
// 2.js console.log(2, window.document.querySelector('p'));
これらのファイルを、以下のサーバで配信する。
const http = require('http'); const fs = require('fs'); http.createServer((req, res) => { switch(true) { case /^\/$/.test(req.url): fs.readFile('./index.html', 'utf-8', (err, data) => { res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}); res.write(data); res.end(); }) break; case /^\/1\.js$/.test(req.url): fs.readFile('./1.js', 'utf-8', (err, data) => { setTimeout(() => { res.writeHead(200, {'Content-Type': 'text/javascript'}); res.write(data); res.end(); }, 3000) }) break; case /^\/2\.js$/.test(req.url): fs.readFile('./2.js', 'utf-8', (err, data) => { setTimeout(() => { res.writeHead(200, {'Content-Type': 'text/javascript'}); res.write(data); res.end(); }, 3000) }) break; default: res.writeHead(404); res.end(); }; }).listen(8080);
JavaScript ファイルは、リクエストを受け取って 3 秒後に返すようにしてある。
この状態でhttp://localhost:8080/にアクセスした結果が、以下の動画。
Headlineのみが表示され、JavaScript の実行が終わるまでcontentは表示されない。
これは、HTML ファイルのパースは上から順番に行われ、<p>content</p>の前に<script src="/1.js"></script>が処理されるためである。
そのため、/1.jsのダウンロードと実行が終わるまで、contentは表示されない。
JavaScript ファイルのダウンロードは、パースや JavaScript の実行を待たずに行われる。/1.jsのダウンロードとほぼ同時に、/2.jsのダウンロードも開始される。
それにより、1と2がほぼ同時にログに表示される。
実行は、HTML ファイルに書かれている順番に行われる。
/1.jsではp要素を取得できず/2.jsでは取得できているのは、そのため。
async 属性や defer 属性を使うとダウンロードとパースを並行処理できる
次に、index.htmlを以下の内容に書き換えてみる。
<script>タグにasync属性をつけている。
<html> <head lang="en"> <meta charset="utf-8"> </head> <body> <h1>Headline</h1> <script async src="/1.js"></script> <p>content</p> </body> </html>
この状態でアクセスした結果が以下。
/1.jsのダウンロードが終わる前から、contentが表示されている。当然、querySelectorでもp要素を取得できる。
asyncの部分をdeferに置き換えても、同じ結果になる。
asyncやdeferは、パースの途中でダウンロード中の JavaScript ファイルを見つけても、パースを中断しない。
この例で言えば、上から順番にパースしていくと、まだダウンロードが終わっていない<script async src="/1.js"></script>に到達する。
defaultの場合はここでパースを中断し、/1.jsのダウンロード、そして実行が完了してから、以降の行のパースを再開する。
だがasyncとdeferでは、/1.jsがダウンロード中だった場合、そのまま以降の行のパースを続行する。
つまり、JavaScript ファイルのダウンロードを原因としたパースの中断が、発生しない。
パースの完了を待つ defer と、待たない async
JavaScript ファイルのダウンロードが完了した後の処理は、asyncとdeferで異なる。
asyncはダウンロードが終わり次第、JavaScript の実行を開始する。それに対してdeferは、ダウンロードが完了しても、HTML ファイルのパースがまだ終わっていないのなら実行しない。パースが終わるのを待ってから、実行する。
それを確認するために、以下のindex.htmlと JavaScript ファイルを用意した。
<html> <head lang="en"> <meta charset="utf-8"> </head> <body> <h1>Headline</h1> <script async src="/1.js"></script> <script src="/2.js"></script> <p>content</p> </body> </html>
// 1.js console.log('h1', window.document.querySelector('h1')); console.log('p', window.document.querySelector('p'));
// 2.js
console.log(2);
サーバのコードも変更し、/1.jsはリクエストを受け取ってから 1 秒後、/2.jsは 3 秒後に返すようにした。
case /^\/1\.js$/.test(req.url): fs.readFile('./1.js', 'utf-8', (err, data) => { setTimeout(() => { res.writeHead(200, {'Content-Type': 'text/javascript'}); res.write(data); res.end(); }, 1000) }) break; case /^\/2\.js$/.test(req.url): fs.readFile('./2.js', 'utf-8', (err, data) => { setTimeout(() => { res.writeHead(200, {'Content-Type': 'text/javascript'}); res.write(data); res.end(); }, 3000) }) break;
この場合、以下の挙動になる。
/1.jsは 1 秒後にダウンロードが完了するが、その時点では/2.jsはまだダウンロードが終わっておらず、<script src="/2.js"></script>の部分でパースが止まっている。
そして、asyncである/1.jsはダウンロードが終わった時点で実行されるため、h1要素は取得できるがp要素は取得できない。
次に、asyncをdeferに置き換えてアクセスしてみる。
@@ -4,7 +4,7 @@ </head> <body> <h1>Headline</h1> -<script async src="/1.js"></script> +<script defer src="/1.js"></script> <script src="/2.js"></script> <p>content</p> </body>
先ほどと同様に/1.jsは 1 秒後にダウンロードが完了するが、その時点ではまだ実行しない。
/2.jsのダウンロードと実行、そして HTML ファイルのパースが最後まで完了するまで、待機する。そしてパースが終わった段階で、実行する。そのため、h1要素だけでなくp要素も取得できる。
DOMContentLoadedという、パースが完了したときに発生するイベントがある。
defer属性を設定したスクリプトは、このイベントの直前に実行される。
そして、DOMContentLoadedはあくまでも「パースが完了した」ことを意味しており、レンダリングが行われたことは意味しない。
以下のindex.htmlとheavy.jsで確認できる。
<html> <head lang="en"> <meta charset="utf-8"> </head> <body> <script> window.document.addEventListener('DOMContentLoaded', () => { alert('DOMContentLoaded'); }); </script> <h1>Headline</h1> <script defer src="/heavy.js"></script> <script src="/2.js"></script> <p>content</p> </body> </html>
// heavy.js console.log('start'); const p = window.document.querySelector('p'); if (p) { console.log(p.textContent); p.textContent = 'overwrite'; } // 時間のかかる処理を行いたいだけであり、処理の内容に意味はない const myFunc = () => { window.document.createElement('div'); window.document.createElement('span'); window.document.createElement('ul'); window.document.createElement('li'); }; for (let i = 0; i < 1000000; i += 1) { myFunc(); } console.log('end');
/heavy.jsはリクエストを受け取ってすぐに、/2.jsはリクエストを受け取って 3 秒後に、返すようにした。
この状態でhttp://localhost:8080/にアクセスしたのが、以下の動画。
パースが終わった時点で、既にダウンロード済みだった/heavy.jsの実行が始まり、startがログに表示される。
既にパースは完了しているので、p要素を取得できる。だが画面には、p要素はまだレンダリングされていない。
その後myFunc()を繰り返し処理する。私の環境ではこの処理には 1.6 秒ほどかかるが、これが終わるとendがログに表示される。
そしてDOMContentLoadedイベントが発生するのだが、この時点でもまだ、p要素のレンダリングは行われない。アラートを閉じてようやく、レンダリングされる。
整理すると、以下の順番になる。
- HTML ファイルのパースが終わる
defer属性のついたスクリプトを実行DOMContentLoadedイベントが発生- レンダリング
asyncはダウンロードが終わり次第実行していくので、DOMContentLoadedイベントのタイミングとは関係がない。DOMContentLoadedより前に実行されることもあれば、後に実行されることもある。
同じ属性を設定した script タグが複数ある場合の挙動
ダウンロードが終わり次第実行するという性質上、async属性が設定されたスクリプトの実行順序は、保証されない。
例えば、HTML ファイルに以下のような記述があった場合、JavaScript ファイルがどの順番で実行されるかは、実際にページにアクセスしてみるまで分からない。
記述された順番とは無関係に、ダウンロードが終わったものから実行されていく。
<script async src="/1.js"></script> <script async src="/2.js"></script> <script async src="/3.js"></script>
これに対してdeferは、必ず上から順番に実行されていくので、実行順序が保証される。
以下の場合、/1.jsより先に/2.jsや/3.jsのダウンロードが完了しても、必ず/1.jsのダウンロードと実行の完了を待つ。そのあとで/2.jsの実行を行い、最後に/3.jsを実行する。
<script defer src="/1.js"></script> <script defer src="/2.js"></script> <script defer src="/3.js"></script>
