DOMContentLoadedが使用されているJSをasyncで読み込むのはダメな理由

async属性とは

HTMLのscriptタグにasync属性を付けると非同期で読み込むことができる。

非同期で読み込むことができるということはDOM構築をブロックさせないため通常よりも速く読み込むことができるというメリットがある。

そのため単純に「async属性を付ければJavaScriptを速く読み込めるんだ！」と、既存のコードにasync属性を深く考えずに追加してしまうWebサイトがたまにある。

DOMContentLoadedが動作しない

結論から言うとasync属性で読み込んだJavaScriptはDOMContentLoadedが動作しないためコード内にDOMContentLoadedが使用される場合はasync属性を使ってはいけない。(loadイベントも同様)

// <script src="main.js" async></script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('r').textContent = 'DOMContentLoaded';
});

async属性がある場合

async属性がない場合

jQueryの$(function()は動作する

jQueryの$(function(){や$(document).ready(function(){の場合はasync属性が付いていてDOMContentLoadedが失敗してもページの読み込みが完了したらスクリプトが実行されるようになっているため問題ない。

// <script src="main2.js" async></script>
$(function() {
  $('#r').text('jQuery Loaded');
});

async属性がある場合(jQuery)