プログラミング
 Computer >> コンピューター >  >> プログラミング >> プログラミング

JavaScript の統合をマスターする:HTML パフォーマンスのベスト プラクティス

はじめに

この記事では、HTML ファイルへの JavaScript の追加の包括的な概要を説明し、次の 3 つの主要な方法を詳しく説明します。 スクリプトを <head> にインラインで配置する 、<body> のインライン 、および外部 .js へのリンク ファイル。この記事では、単なる「方法」を超えて、重要な「理由」を掘り下げ、レンダリング ブロック、ブラウザ キャッシュ、遅延や非同期などの最新の属性の使用などの概念を含む、各アプローチのパフォーマンスへの重要な影響について説明します。

理論と実践を橋渡しするために、このチュートリアルには、ダーク モード切り替えの作成や Web フォームの検証などの実用的な実際の例が含まれています。最後に、クリーンで保守しやすいコードを記述するための重要なベスト プラクティスと、ブラウザの開発者コンソールを使用してよくある初心者のエラーを解決するためのトラブルシューティング ガイドを提供し、自信を持って Web 開発プロジェクトを開始できるようにします。

JavaScript プロジェクトをすぐにデプロイする必要がありますか? DigitalOcean アプリ プラットフォームをチェックして、数分で GitHub から直接 JS プロジェクトをデプロイします。

重要なポイント

  • JavaScript を追加するためのベスト プラクティスは、外部 .js を使用することです。 ファイルの整理、メンテナンス、再利用性を向上させる
  • <script> を配置します <head> のタグ レンダリングがブロックされ、ユーザーに空白のページが表示されるため、パフォーマンスが最悪になります。
  • defer の使用 外部スクリプトの属性は、最適なパフォーマンスを実現するために推奨される最新のアプローチです。
  • 外部 JavaScript ファイルは、ブラウザのキャッシュを通じてパフォーマンスを大幅に向上させますが、インライン スクリプトでは実現できません。
  • 単一の .js ファイルを複数のページにリンクできるため、更新とメンテナンスが大幅に効率化されます。
  • 開発者コンソール (F12) は、一般的な JavaScript エラーをトラブルシューティングするための最も重要なツールです。

方法 1:インライン スクリプトを <head> に追加する方法

専用の HTML タグ <script> を使用して、HTML ドキュメントに JavaScript コードを追加できます。 JavaScript コードをラップします。 <script> タグは <head> に配置できます。 HTML のセクションまたは <body> セクションは、JavaScript をロードするタイミングに応じて異なります。

通常、JavaScript コードはドキュメント <head> 内に含めることができます。 このセクションは、HTML ドキュメントのメイン コンテンツに含まれないようにするためのものです。

ブラウザのタイトルが Today's Date である次の基本的な HTML ドキュメントを考えてみましょう。 :

インデックス.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
</head>
 
<body>
</body>
 
</html>

アラートを作成するスクリプトを追加するには、<script> を追加します。 タグと <title> の下の JavaScript コード 以下に示すように、タグ:

インデックス.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
 <script>
 let d = new Date();
 alert("Today's date is " + d);
 </script>
</head>
 
<body>
</body>
 
</html>

ここにスクリプトを配置すると、ブラウザは <body> でコンテンツのレンダリングを開始する前に JavaScript を解析して実行するように指示されます。 ページの。

このアプローチは、ページ上の要素と直接対話する必要がないスクリプトに最適です。 <head> のスクリプトの場合 を実行しても、ブラウザはまだドキュメント オブジェクト モデル (DOM) を構築していません。 <body> の場合 。これは、見出し、段落、div などの HTML 要素がまだ存在しないことを意味します。その結果、これらの要素を検索または変更しようとするコード (例:document.getElementById() を使用) ）は失敗します。したがって、この方法は、後で使用するために関数や変数を設定する場合、またはできるだけ早く読み込む必要があるサードパーティの分析スクリプトを組み込む場合に最適です。

ページをロードすると、次のようなアラートが表示されます。

JavaScript の統合をマスターする:HTML パフォーマンスのベスト プラクティス

方法 2:インライン スクリプトを <body> に追加する方法

<script> タグは <body> 内に配置することもできます。 セクション。スクリプトがここに配置されると、HTML パーサーは作業を一時停止し、ドキュメント内でスクリプトが出現する正確な位置でスクリプトを実行します。これは、HTML 要素をすぐに検索して変更する必要がある JavaScript コードに必要なメソッドです。

一般的なベスト プラクティスは、終了 </body> の直前にスクリプトを配置することです。 タグ。この配置により、スクリプトの実行が開始される前に、ページ上のすべての HTML 要素が解析され、DOM で使用できるようになります。また、ブラウザーが表示可能なすべてのテキストと画像を最初にレンダリングできるため、ユーザーは時間のかかる JavaScript が実行される前にページのコンテンツを確認できるため、知覚されるページのパフォーマンスも向上します。これにより、JavaScript の実行によってブロックされずにコンテンツを表示できるようになります。

このメソッドを使用して、HTML 本文に日付を直接書き込んでみましょう。

インデックス.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
</head>
 
<body>
 <script>
 let d = new Date();
 document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
 </script>
</body>
 
</html>

Web ブラウザを通じて読み込まれた上記の HTML ドキュメントの出力は、次のようになります。

JavaScript の統合をマスターする:HTML パフォーマンスのベスト プラクティス

小さいスクリプトや 1 ページでのみ実行されるスクリプトは HTML ファイル内で問題なく動作しますが、大規模なスクリプトや多くのページで使用されるスクリプトの場合、スクリプトを含めると扱いにくくなったり、読んだり理解したりするのが難しくなる可能性があるため、あまり効果的な解決策とは言えません。次のセクションでは、HTML ドキュメント内で別の JavaScript ファイルを処理する方法について説明します。

方法 3:別の JavaScript ファイルを使用する方法

複数のページにわたって使用する必要がある大規模なスクリプトまたはコードの場合、最も効果的で専門的な解決策は、JavaScript を .js という名前の別のファイルに配置することです。 拡張子。 <script> を使用して、HTML からこの外部ファイルにリンクできます。 src のタグ (ソース) 属性。

このアプローチの利点は次のとおりです。

  • 懸念事項の分離 :構造用の HTML、スタイル用の CSS、対話型の JavaScript を別のファイルに保持します。これにより、プロジェクトがよりクリーンになり、より整理され、デバッグが容易になります。
  • 再利用性とメンテナンス :main-navigation.js などの単一のスクリプト ファイル 、Web サイトのすべてのページからリンクできます。ナビゲーション ロジックを更新する必要がある場合は、その 1 つのファイルを編集するだけで済みます。
  • ブラウザのキャッシュ :ユーザーがサイトに初めてアクセスすると、ブラウザーは .js ファイルをダウンロードします。次回のアクセス時、または同じファイルを使用する他のページに移動するとき、ブラウザはファイルを再度ダウンロードするのではなく、保存された (キャッシュされた) コピーを使用します。これにより、読み込み時間が大幅に短縮されます。

JavaScript ドキュメントを HTML ドキュメントに接続する方法を示すために、小さな Web プロジェクトを作成してみましょう。 script.js で構成されます js/ 内 ディレクトリ、style.css css/ 内 ディレクトリとメインの index.html プロジェクトのルートにあります。

project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html

日付を <h1> として表示する JavaScript コードを移動しましょう。 ヘッダーから script.js ファイル:

script.js

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

次に、style.css も編集しましょう。 <h1> に背景色とスタイルを追加してファイルを作成します。 ヘッダー:

スタイル.css

body {
 background-color: #0080ff;
}
 
h1 {
 color: #fff;
 font-family: Arial, Helvetica, sans-serif;
}

最後に、index.html からスクリプトとスタイルシートの両方を参照できます。 ファイル。 <link> を使用します。 <head> のタグ CSS と <script> の場合 src を含むタグ <body> の属性 JavaScript の場合。

インデックス.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
 <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
 <script src="js/script.js"></script>
</body>
 
</html>

JavaScript と CSS が導入されたことで、プロジェクトはより組織化されました。 index.html をロードすると このページを Web ブラウザに読み込むと、次のような現在の日付が表示されたスタイル付きのページが表示されるはずです。

JavaScript の統合をマスターする:HTML パフォーマンスのベスト プラクティス

JavaScript をファイルに配置したので、追加の Web ページから同じ方法でそれを呼び出し、それらをすべて 1 か所で更新できます。この方法は、Web プロジェクトで JavaScript を管理するための最も組織的かつスケーラブルな方法を提供します。外部スクリプトの読み込み方法をさらに詳細に制御するには、async の使用を検討してください。 および defer <script> の属性 タグ。

実際の例にはどのようなものがありますか?

これまでに学んだことに基づいて、実際の例をいくつか見てみましょう。

1.シンプルなダークモードの切り替え

最近のほぼすべての Web サイトやアプリはダーク モードを提供しています。これは、CSS クラスを JavaScript で切り替えることで実現できます。

HTML: 

<!DOCTYPE html>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Dark Mode</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <button id="theme-toggle">Toggle Dark Mode</button>
 <h1 id="title">DigitalOcean</h1>
 <p>This is some example text on the page.</p>
 <script src="js/script.js"></script>
</body>
</html>

CSS: 

/* This class will be added or removed by JavaScript */
.dark-mode {
 background-color: #222;
 color: #eee;
}

JavaScript: 

const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
 document.body.classList.toggle('dark-mode');
});

JavaScript はまず、ID を使用してボタンを検索します。次に、クリックを待機するイベント リスナーをアタッチします。ボタンをクリックすると、classList.toggle('dark-mode') コマンドが実行されます。 <body> の場合 要素には .dark-mode がありません クラスにJavaScriptで追加します。すでに存在している場合は、JavaScript によって削除されます。ブラウザは、そのクラスに関連付けられた CSS スタイルを即座に適用します。

2.基本的なフォームの検証

Web サイトは、ユーザーがフォームを送信する前に、フォームに正しく入力していることを確認する必要があります。 JavaScript は、ページをリロードすることなく、これを即座にチェックできます。

HTML: 

<!DOCTYPE html>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Form Validator</title>
</head>
<body>
 <form id="contact-form">
 <label for="email">Email:</label>
 <input type="text" id="email" placeholder="you@example.com">
 <button type="submit">Subscribe</button>
 <p id="error-message" style="color: red;"></p>
 </form>
 <script src="js/script.js"></script>
</body>
</html>

JavaScript: 

const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
contactForm.addEventListener('submit', function(event) {
 if (!emailInput.value.includes('@')) {
 event.preventDefault(); 
 
 errorMessage.textContent = 'Please enter a valid email address.';
 } else {
 errorMessage.textContent = '';
 }
});

スクリプトは submit をリッスンします。 フォーム上のイベント。 "Subscribe" をクリックすると ボタンを押すと機能が実行されます。まず、電子メール入力内のテキストに @ が含まれているかどうかを確認します。 シンボル。

  • そうでない場合は、event.preventDefault() フォームのデフォルトの送信動作を停止します。その後、ユーザーに役立つエラー メッセージが表示されます。
  • 存在する場合、スクリプトは何も行わず、フォームは通常どおり送信されます。

各メソッドのパフォーマンスに関する考慮事項は何ですか?

ここで説明する JavaScript 読み込みメソッドごとに、パフォーマンスに関する重要な考慮事項について説明します。

<head> のインライン スクリプト

  • 主な問題: レンダリングのブロック

    <head> にスクリプトを配置する パフォーマンスに最も重大な悪影響を及ぼします。ブラウザは、ページの <body> の一部のレンダリングに進む前に、JavaScript をダウンロード、解析、実行する必要があります。 。スクリプトが大きい場合、または実行が遅い場合、ユーザーはスクリプトが終了するまで空白の白いページを見つめることになります。これにより、最初のコンテンツフル ペイント (FCP) までの時間が長くなります。 、重要なユーザー エクスペリエンスの指標です。

  • キャッシュ: なし

    インライン スクリプトは HTML ドキュメント自体の一部です。これらをブラウザーで個別にキャッシュすることはできません。ユーザーがページにアクセスするたびに、スクリプトが再ダウンロードされ、HTML の残りの部分とともに再解析されます。

この方法は一般にパフォーマンスが最悪なので、スクリプトが非常に小さく、絶対に他のものより先に実行する必要がある場合を除き、避けるべきです。

<body> のインライン スクリプト

  • 主な問題: 部分的なレンダリングのブロック

    この方法は、スクリプトを <head> に配置する場合に比べて大幅に改善されています。 。ブラウザは、<script> が検出されるまで HTML を解析してレンダリングします。 タグ。その時点で、スクリプトを実行するためのレンダリングが停止されます。スクリプトを <body> の最後に配置することで、 (</body> の直前) タグ）を使用すると、表示されているページ全体が最初にレンダリングされるようになります。

  • キャッシュ: なし

    <head> のスクリプトと同じように 、<body> のインライン スクリプト は HTML の一部であり、独立してキャッシュすることはできません。

スクリプトを本文の最後に配置することは、コンテンツがすぐに表示されるため、速度の認識を向上させるための良い戦略です。ただし、ページが完全にインタラクティブになるまでには時間がかかる可能性があります。

外部 JavaScript ファイル

この方法は、主にブラウザのキャッシュと特別な読み込み属性という 2 つの要素により、最も高い柔軟性と最高のパフォーマンスを提供します。

  • 主な利点: キャッシュと非同期ロード

    • キャッシュ ：これはパフォーマンス上の最大の勝利です。外部 .js ファイルは最初の訪問時に一度ダウンロードされます。同じスクリプトを使用する後続のすべてのページでは、ブラウザはローカル キャッシュからファイルをロードするため、ネットワークの遅延がなくなり、サイトの速度が大幅に向上します。

    • defer と async 属性: 外部スクリプトにより、2 つの強力な属性の使用が可能になります。

      • <script defer src="..."></script> :これは、ブラウザが HTML の解析を続けている間、バックグラウンドでスクリプトをダウンロードするように指示します。スクリプトは、ドキュメント全体が解析された後にのみ実行されます。これは非ブロッキングであり、HTML に表示される順序でスクリプトが実行されることが保証されるため、推奨される最新のアプローチです。

      • <script async src="..."></script> :これにより、レンダリングをブロックすることなく、バックグラウンドでスクリプトがダウンロードされます。ただし、ダウンロードが完了するとすぐにスクリプトが実行されます。これはいつでも実行される可能性があり、レンダリングが中断される可能性があります。実行順序が重要ではない、独立したサードパーティ スクリプト（広告や分析など）に最適です。

defer にリンクされた外部ファイルの使用 属性は、最適なパフォーマンスを実現するためのベスト プラクティスです。これは、ノンブロッキング読み込みと強力なブラウザ キャッシュの利点を組み合わせたものです。

ベスト プラクティスは何ですか?

ここでは、HTML ファイルで JavaScript を使用する場合の重要なベスト プラクティスとトラブルシューティングのヒントをいくつか紹介します。

  • JavaScript を外部ファイルに保存する :常に .js へのリンクを優先します。 ファイル (<script src="..."></script>) ) JavaScript を HTML に直接記述する代わりに。これにより、コードが整理されて保守が容易になり、ブラウザがファイルをキャッシュして読み込みを高速化できるようになります。
  • <body> の最後にスクリプトをロードします defer を使用 :最高のユーザー エクスペリエンスを実現するには、<script> を配置してください。 終了 </body> の直前のタグ タグに defer を追加します。 属性。これにより、JavaScript によってブロックされることなく、ページ コンテンツが迅速に読み込まれて表示されるようになります。
  • 読みやすいコードを書く :変数と関数には明確でわかりやすい名前を使用してください (例:calculateTotalPrice) calc の代わりに ）。コメント // を使用する コードの内容ではなく、コードを書いた理由を説明する
  • 同じことを繰り返さない（DRY） :同じコード行を複数の場所に記述している場合は、そのコードを関数でラップします。その後、必要なときにいつでもその関数を呼び出すことができるため、コードが短くなり、更新が容易になります。

一般的な問題とそのトラブルシューティング方法は何ですか?

スクリプトが機能しない場合でも、パニックにならないでください。ブラウザの開発者ツールはあなたの親友です。 F12 を押します。 （または、ページを右クリックして「検査」を選択します） ) をクリックし、「コンソール」 をクリックします。 タブ。ほとんどのエラーはここに赤色で表示されます。

  • エラー:「null のプロパティを読み取れません」または「定義されていません」

    • 意味 :JavaScript がまだロードされていない HTML 要素にアクセスしようとしました。
    • 解決策 :これはほとんどの場合、<script> を意味します。 タグは <head> にあります または <body> の上位にありすぎます 。スクリプトを <body> の最後に移動します。 defer 属性を追加します。

  • エラー:「キャッチされない構文エラー」

    • 意味 :コードにタイプミスがあります。
    • 解決策 :通常、コンソールには行番号が表示されます。その行をよく見て、括弧 () が欠落していないかどうかを確認してください。 、中括弧 {} 、"" で囲みます。 、またはその他のタイプミス。

  • 問題:スクリプトが実行されず、コンソールでエラーが発生しません。

    • 意味 :HTML ファイルで .js が見つからない可能性があります。 ファイル。
    • 解決策 :「ネットワーク」をチェックします。 開発者ツールのタブ。スクリプト ファイルが 404 エラーとともにリストされている場合、ファイル パスは src にあります。 属性が間違っています。スペルとフォルダー構造を再確認してください (例:<script src="js/script.js"></script>) ).

  • 問題:コードは実行されますが、期待どおりの動作をしません。

    • 意味 ：これは論理エラーです。構文は正しいですが、手順が間違っています。

    • 解決策 :console.log() を使用してください デバッグするために。これをコードに配置して、さまざまな段階で変数の値を出力します。これは、ロジックを追跡し、どこで問題が発生しているかを正確に確認するのに役立ちます。

      let userRole = 'guest';
console.log('User role before check:', userRole); // See what the value is
if (userIsAdmin) {
 userRole = 'admin';
}

よくある質問 (FAQ)

1. HTML ファイルに JavaScript を追加する最良の方法は何ですか?

最良の方法は、外部の .js にリンクすることです。 defer を持つファイル 属性、終了 </body> の直前に script タグを配置します。 タグ (例:<script src="path/to/script.js" defer></script>) ).

2. JavaScript はヘッドまたはボディに入れるべきですか?

ほとんどの場合、JavaScript <script> を配置する必要があります。 <body> の最後にあるタグ セクション、終了 </body> の直前 タグ。

<head> にスクリプトを配置する ページのレンダリングをブロックします。つまり、スクリプトが完全にダウンロードされて実行されるまで、ユーザーには空白の白いページが表示されます。 <body> の最後にスクリプトを配置する場合 を使用すると、ブラウザは最初に HTML と CSS 全体をレンダリングできるため、ユーザーはコンテンツをより速く表示できます。

3. 1 つの HTML ファイルに複数のスクリプト タグを追加できますか?

はい、<script> はいくつでも含めることができます 必要に応じて 1 つの HTML ファイルにタグを追加します。ブラウザは、ドキュメント内に表示される順序でそれらをダウンロードして実行します。

これは通常、サードパーティのライブラリに依存するカスタム スクリプトの前に、サードパーティのライブラリをロードするために使用されます。

<body>
 <script src="library.js"></script> 
 
 <script src="my-app.js"></script> 
</body>

4. async の主な違いは何ですか および defer ?

どちらの属性も、ページのレンダリングをブロックすることなくスクリプトを読み込みます。主な違いは、defer であることです。 async は、ドキュメントが完全に解析された後、出現する順序でスクリプトが実行されることを保証します。 スクリプトはダウンロードされるとすぐに実行されます。この順序は任意です。

5.動作しない JavaScript をデバッグするにはどうすればよいですか?

ブラウザの開発者ツールを開きます。 (F12)、コンソールを確認します。 タブでエラー メッセージを表示するには、ネットワークを使用します。 タブをクリックしてファイルの読み込みを確認し、console.log() を追加します 変数値をトレースするステートメント。

結論

このチュートリアルでは、HTML に JavaScript を追加するための 3 つの主要なメソッドを学習しました:<head> のインライン 、<body> のインライン 、および外部 .js へのリンク ファイル。また、レンダリング ブロック、ブラウザー キャッシュ、defer などのパフォーマンスへの影響についても調査しました。 および async 属性、実際の例、開発者コンソールを使用したトラブルシューティング ガイドも含まれています。

ユースケースに適した JavaScript 読み込み戦略を選択し、外部ファイルを使用してクリーンで保守可能なコードを記述し、ブラウザー開発者ツールを使用して一般的なエラーをデバッグできるようになりました。外部 .js の使用 defer を持つファイル 属性は、ほとんどの実稼働 Web プロジェクトに推奨されるアプローチです。

JavaScript スキルの構築を続けるには、次のチュートリアルを参照してください。

  • JavaScript 開発者コンソールの使用方法
  • JavaScript でコメントを記述する方法
  • JavaScript の構文とコード構造を理解する
  • JavaScript の変数、スコープ、ホイスティングを理解する

JavaScript の統合をマスターする:HTML パフォーマンスのベスト プラクティス この作品は、クリエイティブ コモンズ 表示 - 非営利 - 継承 4.0 国際ライセンスに基づいてライセンスされています。


  1. 二重連結グラフ

    2つの頂点の間に2つの頂点が互いに素なパスが存在する場合、無向グラフは2重連結グラフと呼ばれます。つまり、任意の2つの頂点の間にサイクルがあると言えます。 グラフGは、接続されていて、グラフに関節点や切断点が存在しない場合、2重連結グラフであると言えます。 この問題を解決するために、DFSトラバーサルを使用します。 DFSを使用して、アーティキュレーションポイントが存在するかどうかを確認します。また、すべての頂点がDFSによってアクセスされているかどうかを確認します。アクセスされていない場合は、グラフが接続されていないと言えます。 入力と出力 Input: The adjacency

  2. ペアリングヒープのバリエーション

    ペアリングヒープは、空のヒープ、またはルート要素とペアリングツリーの空のリストを含むペアリングツリーのいずれかです。 ヒープ順序プロパティでは、ノードの親がノード自体より大きくないことが必要です。 次の説明では、キーの減少操作をサポートしない純粋関数型ヒープについて検討します。 タイプPairingTree[Element]=Heap（element：Element、subheaps：List [PairingTree [Element]]） タイプPairingHeap[Element]=Empty | PairingTree [Element] ペアリングヒープには、最小ペアリ