こんにちは！kossyです！
さて、今回はJavaScript読み込みの際に指定できるasyncについて、
ブログに残してみたいと思います。
asyncという単語の意味
まずは単語の意味から解説します。
async, await 構文 で馴染みのある方もいらっしゃるかもしれませんが、
asyncはAsynchronousの略語で、「非同期の」という意味になります。
ちなみに対義語は、Synchronousです。
同期・非同期については以下のYouTubeの動画が基礎的なところは参考になりました。
https://www.youtube.com/watch?v=QugDLcOo_EE
別のトピックですが、
よく非同期処理と並列処理(マルチスレッド)を混同する方がいらっしゃいますが、
実際には全く別の処理の仕方になっています。
javascriptができるのは非同期処理であって並列処理ではない - Qiita
前置き長くなりましたが、JavaScript読み込みの際にasyncを指定すると、
「.jsファイルを非同期で読み込み、即座に実行」するようになります。
通常、ブラウザはHTMLを解析する際、コードの上部から解析していきます。
ここで、headタグにscriptタグが存在する時、そのscriptタグを見つけた時点でHTMLの解析を一時的に停止し、
jsファイルのダウンロードと実行が同期的に行われます。
asyncを記述すると、javascriptファイルのダウンロードが同期処理ではなく非同期処理で行われるようになり、
HTMLの解析は停止されなくなります。
勉強になりました。
