ちょっと気になってたから調べたら結構複雑でびっくり
やっぱりDOM配置に依存するJSにはdeferを使うほうがいい
- スクリプトの参照をDOMの下、bodyを閉じる要素の真上に配置する。
- 他の人が使うようなライブラリを作っているのでなければ、
DOMContentLoadedやloadイベントをリッスンする必要はない。 - 外部ファイルを参照しているスクリプトに
defer属性をつける。 - DOMの読み込みに依存せず、ドキュメント内の他のスクリプトの動作を確認するために実行するコードがある場合は、
スクリプトをページの先頭に配置し、
async属性を設定することができる。
原文だと teeing things off だけど多分 seeing things off の打ち間違い
参考: