【javascript】jsファイルを非同期で読み込む「defer/async」について

非同期で読み込む「defer/async」とは？

非同期っていうとピンとこないけど、htmlとjsファイルを並行して読み込んでくれるから表示が早くなるってやつらしい
「defer/async」の違いはjsファイルを読み込むまで一緒で実行する時のタイミングが違う

（async）
//並行して読み込み、完了次第即実行
//（多数のjsファイルで使うと実行がバラバラになったりする）
<script src="./script.js" async></script>

（defer）
//並行して読み込みhtmlの読み込みが完了次第順番に実行
//（多数のjsファイルがあっても上から順番に実行される）
<script src="./script.js" defer></script>

基本的に「defer」を使って、「async」はhtmlファイルが読み込み完了しなくてもさっさと実行させたいjsファイルがあるときに使えばよさそう

参考

<script> タグに async / defer を付けた場合のタイミング

スクリプトの非同期読み込み(async, deferの違い)

外部jsファイルを非同期で読み込むとファイル内のdocument.writeが無視される

「defer/async」を使って非同期で読み込むjsファイル内で「document.write」を使ってると出力されないみたい

こんな感じのエラーが出る

'Document'で 'write'を実行できませんでした。明示的に開かない限り、非同期にロードされた外部スクリプトから文書に書き込むことはできません。
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

参考

読み込みのタイミングによっては外部 script のdocument.writeは無視される

外部 script の読み込みのタイミングによってはdocument.writeが無視される場合がある

解決策：iframeを使う

どうしても外部jsファイルでdocument.writeを使いたい場合はiframeで対応ができるみたい

参考

外部ドメイン上のスクリプトのdocument.write処理の代替案について。