JavaScriptをページの最後に実行させるには、いくつかの一般的なアプローチがあります。これらの方法は、ページのパフォーマンスを向上させるために、重要なスクリプトが含まれるウェブサイトなどで使用されます。
スクリプトをページの最下部に配置する
HTMLドキュメント内で、<body>タグの終了直前に<script>タグを配置します。これにより、ブラウザはページの内容を先に読み込み、最後にJavaScriptを実行します。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<!-- ページの内容 -->
<!-- スクリプトはここに -->
<script src="script.js"></script>
</body>
</html>defer属性を使用する
<script>タグにdefer属性を追加することで、HTMLが解析された後でスクリプトが実行されるようにブラウザに指示できます。
<script src="script.js" defer></script>deferは外部スクリプト（src属性を持つ<script>タグ）にのみ使用可能です。
JavaScriptでの動的なスクリプトロード
ドキュメントのロードが完了した後に動的にスクリプトを追加することも可能です。これは、ページのロード時ではなく、特定のアクション（例えば、ユーザーのクリック）後にスクリプトを実行したい場合に便利です。
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);
});まとめ
これらのアプローチは、ページの読み込み速度とユーザー体験を改善することを目的としています。例えば、defer属性を使用する方法は、スクリプトがページの解析を遅らせることなく、かつ順番通りに実行されることを保証するため、推奨されるアプローチの一つです。
ただし、どの方法を選択するかは、ページの構造や特定の要件によって異なります。
