HTMLにJavaScriptファイルを追加する最良の方法-jsチュートリアル-php.cn

HTMLにJavaScriptファイルを追加する最良の方法

Barbara Streisand

リリース： 2024-10-09 20:33:28

オリジナル

646 人が閲覧しました

Best Way to add Javascript file in HTML

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 が完全に解析されるまで待ってからスクリプトを実行します