JavaScriptの非同期実行を使ってみました
Webサイトの表示速度を改善しようと思ってJavaScriptの非同期実行を使ってみました。
<script>: The Script element - HTML: Hypertext Markup Language | MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
元々がdocument.write
を使ったスクリプトだったので、単純にasync
/defer
を追加するだけではうまくいかず、少し調べて
document.write(html);
の部分を
document.getElementById('id').innerHTML = html;
に書き換えて使うことにしてみました。
この方法だとスクリプトに加えてHTMLの変更が必要になるのが難点ですが、個人的には分かりやすい方法だったので悩んでいる人は試してみてください。ちなみに、async
とdefer
で実行のタイミングが変ってくるみたいですが、今回はdefer
の方を使ってみました。