ホームページ > 記事 > ウェブフロントエンド > HTMLにJavaScriptファイルを追加する最良の方法
HTMLにJavaScriptファイルを追加する最良の方法
- Barbara Streisandオリジナル
- 2024-10-09 20:33:28699ブラウズ
HTML では、JavaScript ファイルを含める方法がいくつかあります。 4 つの異なる方法とその欠点を説明し、最後に最良のアプローチを紹介します。
1. <頭>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js"></script>
</head>
<body>
</body>
</html>
このアプローチでは、コードの解析中に JavaScript ファイルが本体内の HTML の前に最初にロードされ、JavaScript がまだ解析されていない本体内の要素を操作しようとすると、HTML コンテンツが完全に解析されていないため、エラーが発生する可能性があります。ロードされました。
このブロック動作により、ページの残りの部分の解析とレンダリングが遅延し、パフォーマンスとユーザー エクスペリエンスに影響します。
2. 内(最後に)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="custom.js"></script>
</body>
</html>
このアプローチでは、JavaScript がロードされて実行される前に HTML が完全に解析され、DOM 要素の欠落に関連するエラーが防止されます。このアプローチはすべて良いのですが、HTML の解析と JavaScript の読み込みは順番に行われるため、2 つのプロセスが異なる時間に発生するため、全体的に時間がかかる可能性があります
3. <頭>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js" async></script>
</head>
<body>
</body>
</html>
このアプローチでは、JavaScript を非同期にするため、HTML の読み込みがブロックされません。 HTML の解析と JavaScript の読み込みは両方とも並行して行われます。ただし、HTML が完全に解析される前に JavaScript が実行され、js がまだ読み込まれていない HTML 要素を操作しようとすると、エラーが発生する可能性があります。
注: — このアプローチは、html と js を同時にロードすることで時間を節約できますが、エラーに対して脆弱になります
4. <頭>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js" defer></script>
</head>
<body>
</body>
</html>
このアプローチは 3 番目のアプローチに似ており、HTML 解析と JavaScript の読み込みの両方が並行して行われます。ただし、JavaScript が最初に読み込まれる場合でも、ブラウザは HTML が完全に解析されるまで待ってからスクリプトを実行します
まとめ: 最善のアプローチ
通常、最良の方法は以下を使用することです:
理由:
- HTML 解析はブロックされません (ノンブロッキング ダウンロード)。
- これにより、DOM が完全に解析された後にスクリプトが実行されるようになり、DOM 要素をより安全に操作できるようになります。
- 複数の遅延スクリプトがある場合、スクリプトの実行順序が保持されます。
スクリプトが DOM コンテンツから独立している場合 (スクリプトや広告の追跡など)、パフォーマンスを向上させるために非同期を使用できます。
以上がHTMLにJavaScriptファイルを追加する最良の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。