HTML の script タグの詳細な説明 (コード付き)-htmlチュートリアル-php.cn

script 要素

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML の script タグの詳細な説明 (コード付き)

不言

Sep 06, 2018 pm 05:32 PM

html html5 javascript

この記事では、HTML の script タグ (コード付き) について詳しく説明します。必要な方は参考にしてください。

script 要素

HTML ページで「JavaScript」言語を使用する主な方法は、script 要素を使用することです。script 要素内のコードは上から下に実行されます。

複数のスクリプト要素が導入されると、ブラウザはページに表示される順序でスクリプト要素を解析します。前の解析が完了すると、次のスクリプト要素のコンテンツが処理されます。

HTML の場合は 2 つの方法があります。

//第一种方法：直接在标签内使用 javascript 即可
<script>
    console.log('第一种使用方法');
</script>

//第二种方法：引用外部文件
<script src="example.js"></script>

ログイン後にコピー

でJavaScriptを使用するには

スクリプト要素の属性

スクリプト要素の一般的に使用されるいくつかの属性

src: オプション、外部JavaScriptファイルを参照するために使用されます
type: オプション、コードを記述します使用されるスクリプト言語のタイプ(MIME タイプでもあります)、デフォルト値は text/javascript です
async: オプション、スクリプトの非同期読み込み、外部スクリプトファイルに対してのみ有効
defer: オプション、遅延スクリプト読み込み、ドキュメントが読み込まれた後に実行されます。完全に解析され、外部スクリプトファイルに対してのみ有効です

HTML 内の script 要素の位置

「JavaScript」言語はシングルスレッド言語であるため、同時に実行できるタスクは 1 つだけなので、次のタスクはこのタスクは、前のタスクが完了した後にのみ実行できます。そのため、HTML 内の script 要素の位置は異なり、異なる効果が表示されます。

すべてのスクリプト要素は要素に配置されます

このアプローチは、ページに多くのコンテンツがある場合、すべての Javascript コードが実行されるまで待機する必要があることを意味します。この方法では、ページの読み込みが非常に遅くなり、ユーザーエクスペリエンスが非常に悪くなることがわかります。では、このように最適化するにはどうすればよいでしょうか。実はとても簡単です。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </head>
    <body>
        <div>页面的内容区域</div>
    </body>
</html>

ログイン後にコピー

すべてのスクリプト要素はページのコンテンツの後ろに配置されます

上記のページの読み込みが遅い問題を最適化するには、使用する Javascript コードをページのコンテンツの後に配置するだけで済みます。最初にロードその後コンテンツが表示され、JavaScript コードが実行されるため、ユーザーはページにコンテンツが表示されるまで長時間待つ必要がありません。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>页面的内容区域</div>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </body>
</html>

ログイン後にコピー

スクリプトの読み込みの遅延

スクリプトの読み込みを遅延するには、script 要素の defer 属性を使用する必要があります。要素で defer 属性が使用されている場合、スクリプトは実行前にページ全体が解析されるまで遅延されます。

//example1.js 中的代码
//console.log('example1');
//console.log(document.getElementById('content'));

//example2.js 中的代码
//console.log('example2');
//console.log(document.getElementById('content'));

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script defer src="example1.js"></script>
    <script defer src="example2.js"></script>
</head>
<body>
    <div id="content">这里页面的内容</div>
</body>
</html>

ログイン後にコピー

defer 属性が追加されていない場合、コンソールに次の結果が出力されることがわかります

example1
null
example2
null

ログイン後にコピー

defer 属性が要素に追加されると、結果が変更され、JavaScript コードが表示されないことがわかります。 p 要素のコンテンツがロードされるまで。

example1
<div id="content">这里页面的内容</div>
example2
<div id="content">这里页面的内容</div>

ログイン後にコピー

スクリプトの非同期ロード

スクリプトの非同期ロードには、script 要素の async 属性が必要です。ただし、どちらも script 要素のロード動作を変更します。ただし、async 属性は他の要素には影響しません。ページの読み込みがブロックされ、非同期属性を持つスクリプトは実行順序を保証できません。これは defer 属性とは異なります。

つまり、example2.jsのコードはexample1.jsのコードよりも前に実行される可能性があるため、async属性を使用する場合は、2つのjs間の相互依存を避けてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <div id="content">这里页面的内容</div>
</body>
</html>

ログイン後にコピー

noscript 要素

初期のブラウザには別の問題があります。それは、ブラウザが Javascript 言語をサポートしていない場合にページのコンテンツを表示する方法です。この解決策は、ブラウザが Javascript 言語をサポートしていない場合に使用できる noscript 要素を作成することです。 JavaScript はサポートされていません。コンテンツはブラウザで表示されます。JavaScript をサポートしていないブラウザでのみ表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <noscript>
        当前浏览器不支持 Javascript 请更换浏览器
    </noscript>
</body>
</html>

ログイン後にコピー