速攻で理解！ Script Tag - async & defer の使い分け
2024-04-02
Script Tag - async & defer とは？
async 属性
async 属性を指定すると、JavaScript ファイルは 非同期的に 読み込まれます。つまり、ブラウザは HTML の解析を中断することなく、JavaScript ファイルのダウンロードを開始します。ファイルのダウンロードが完了すると、すぐに実行されます。
メリット:
- ページの読み込み時間を短縮できます。
- ユーザーは、JavaScript ファイルの読み込みを待つことなく、ページの内容を閲覧できます。
- スクリプトの実行順序が保証されません。
- DOM にアクセスする前に実行される可能性があります。
使用例:
- 重要度の低いスクリプト
- ページの読み込み速度を向上させることが重要
- ページの読み込み時間がわずかに長くなる可能性があります。
- DOM にアクセスする必要があるスクリプト
jQuery での async と defer
jQuery では、$.getScript() メソッドを使用して、JavaScript ファイルを非同期的に読み込むことができます。このメソッドには、async オプションと defer オプションがあります。
asyncオプション:async属性と同じように動作します。
例:
$.getScript("script.js", {
async: true,
defer: true
});
結論
async と defer 属性は、JavaScript ファイルの読み込みと実行方法を制御するのに役立ちます。これらの属性を適切に使用することで、ページの読み込み速度を向上させ、ユーザーエクスペリエンスを改善することができます。
async 属性
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>async 属性</title>
</head>
<body>
<h1>ページの読み込み中に実行</h1>
<script src="script.js" async></script>
<p>このテキストは、スクリプトの実行前に表示されます。</p>
</body>
</html>
console.log("async 属性のスクリプトが実行されました");
defer 属性
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>defer 属性</title>
</head>
<body>
<h1>ページの読み込み後に実行</h1>
<script src="script.js" defer></script>
<p>このテキストは、スクリプトの実行後に表示されます。</p>
</body>
</html>
script.js ファイルの内容:
console.log("defer 属性のスクリプトが実行されました");
jQuery での async と defer
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery での async と defer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery で読み込むスクリプト</h1>
<p>このテキストは、スクリプトの実行前に表示されます。</p>
<script>
$.getScript("script.js", {
async: true,
defer: true
});
</script>
<p>このテキストは、スクリプトの実行後に表示されます。</p>
</body>
</html>
console.log("jQuery で読み込まれたスクリプトが実行されました");
Script Tag - async & defer 以外の方法
Module Script
HTML の <script> タグに type="module" 属性を追加することで、JavaScript ファイルを モジュール として読み込むことができます。モジュールは、互いに依存関係を持つ JavaScript ファイルをまとめるための仕組みです。
- コードの分割と再利用が可能
- 依存関係を明確に定義できる
- 古いブラウザではサポートされていない
<script src="script.js" type="module"></script>
ES6 import
import { func } from "./script.js";
func();
Web Worker は、メインスレッドとは別個のスレッドで JavaScript コードを実行するための仕組みです。
- ページのスクロールやユーザー入力などのメインスレッドの処理を妨げずに、CPU 負荷の高いタスクを実行できる
- メインスレッドと通信する必要がある
const worker = new Worker("worker.js");
worker.postMessage("message");
worker.onmessage = (event) => {
console.log(event.data);
};
async と defer 属性は、JavaScript ファイルの読み込みと実行方法を制御する最も簡単な方法です。しかし、モジュールや Web Worker などの他の方法も、特定の状況では有効です。
jquery javascript html
