スキルアップを始める!

【Javascript】ページの最後に実行させたい|defer属性・動的なスクリプトロード

JavaScript(ジャバスクリプト)
この記事は約2分で読めます。
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

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属性を使用する方法は、スクリプトがページの解析を遅らせることなく、かつ順番通りに実行されることを保証するため、推奨されるアプローチの一つです。

ただし、どの方法を選択するかは、ページの構造や特定の要件によって異なります。

URLをコピーしました!