<script async> で DOMContentLoaded が発火しないことがある #JavaScript

async属性をつけた <script async> は非同期で読み込まれるため、
ドキュメントの読み込みが完了した時点で script が読み込まれていないことがある

その場合、読み込みの状況次第では DOMContentLoaded が発火しない

old.js

function main() {
  // 読み込み後に動かしたいコード
}

document.addEventListener("DOMContentLoaded", main, false);

改善策として、ドキュメントの読み込み状態をチェックする
document.readyState を見れば、状況が分かる

NEW.js

function main() {
  // 読み込み後に動かしたいコード
}

if (document.readyState !== "loading") {
  main();
} else {
  document.addEventListener("DOMContentLoaded", main, false);
}