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

HTMLのasync属性を使ってスクリプトを非同期に実行する方法

async属性とは

HTMLでは、async属性を使用することで、スクリプトが利用可能になった時点で非同期的に実行されるように設定できます。なお、この属性は外部スクリプトファイルに対してのみ有効であり、インラインスクリプトには使用できません。

通常、ブラウザはHTMLの解析中に<script>タグを見つけると、そのスクリプトの読み込みと実行が完了するまでページの解析を一時停止します。しかし、async属性を付与すると、スクリプトのダウンロードをバックグラウンドで進めながらHTMLの解析を続行できるため、ページの表示速度が大幅に向上します。

ステップ1：JavaScriptファイルを作成する

まず、外部JavaScriptファイルを用意します。ここでは「new.js」という名前のファイルを作成し、以下のコードを記述します。

function sayHello() {
    alert("Hello World")
}

ステップ2：HTMLコードに組み込む

次に、作成したスクリプトを読み込んで実行するためのHTMLコードは以下の通りです。

<html>
   <head>
      <script src = "new.js"></script>
   </head>
   <body>
      <p>This is demo text.</p>
   </body>
</html>

ステップ3：async属性を追加して非同期化する

上記のコードにasync属性を追加すると、スクリプトは非同期で実行されるようになります。

<script src = "new.js" async></script>

これにより、スクリプトのダウンロード中もページのレンダリングがブロックされず、ダウンロードが完了した時点で即座にスクリプトが実行されます。ページの読み込み速度を重視したい場合や、Google Analyticsなどの計測スクリプトを埋め込む際に特に有効な手法です。ただし、実行順序が保証されないため、他のスクリプトに依存する処理がある場合は注意が必要です。

  1. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動

  2. HTMLで要素のタイプを設定するには？type属性の使い方を解説

    HTMLでは、type属性を使用することで要素のタイプを設定できます。ここでは、ユーザーからの入力を受け取るための<input>タグについて解説します。type属性は、テキスト入力（text）、チェックボックス（checkbox）、ラジオボタン（radio）など、さまざまなフォーム要素と組み合わせて使用されます。type属性で指定できる主な値text：1行のテキスト入力欄password：入力内容が隠されるパスワード欄checkbox：複数選択可能なチェックボックスradio：択一選択のラジオボタンsubmit：フォーム送信ボタンサンプルコード以下のコードを実行して、type属性の