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

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

script 要素

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

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

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

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

//第二种方法：引用外部文件
<script></script>

でJavaScriptを使用するには

スクリプト要素の属性

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

• src: オプション、外部JavaScriptファイルを参照するために使用されます

• type: オプション、コードを記述します 使用されるスクリプト言語のタイプ(MIME タイプでもあります)、デフォルト値は text/javascript です

• async: オプション、スクリプトの非同期読み込み、外部スクリプト ファイルに対してのみ有効

• defer: オプション、遅延スクリプト読み込み、ドキュメントが読み込まれた後に実行されます。完全に解析され、外部スクリプト ファイルに対してのみ有効です

HTML 内の script 要素の位置

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

すべてのスクリプト要素は

要素に配置されます

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

nbsp;html>

    
        <title></title>
        <script></script>
        <script></script>
    
    
        <div>页面的内容区域</div>
    

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

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

nbsp;html>

    
        <title></title>
    
    
        <div>页面的内容区域</div>
        <script></script>
        <script></script>
    

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

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

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

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

nbsp;html>


    <meta>
    <title>Title</title>
    <script></script>
    <script></script>


    <div>这里页面的内容</div>

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

example1
null
example2
null

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

example1
<div>这里页面的内容</div>
example2
<div>这里页面的内容</div>

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

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

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

nbsp;html>


    <meta>
    <title>Title</title>
    <script></script>
    <script></script>


    <div>这里页面的内容</div>

noscript 要素

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

nbsp;html>


    <meta>
    <title>Title</title>
    <script></script>
    <script></script>


    <noscript>
        当前浏览器不支持 Javascript 请更换浏览器
    </noscript>

関連する推奨事項:

HTML における script タグの役割は何ですか? scriptタグでのtype属性の使い方は何ですか?

HTML_html/css_WEB-ITnose の script タグについての研究

HTML の <script> は非 js files_html/css_WEB-ITnose にもリンクできます</script>

🎜

以上がHTML の script タグの詳細な説明 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。