ホームページ > ウェブフロントエンド > フロントエンドQ&A > scriptタグは通常HTMLのどこに書かれているのでしょうか?

scriptタグは通常HTMLのどこに書かれているのでしょうか?

青灯夜游
リリース: 2022-09-16 16:20:23
オリジナル
12150 人が閲覧しました

script タグの位置: 1. head タグ内に配置します。ブラウザは HTML を解析します。script タグを解析するとき、最初にすべてのスクリプトをダウンロードし、次に他の HTML を解析します。 Web ページのコンテンツが変更され、表示に遅れが生じ、ユーザー エクスペリエンスが低下します。 2. body タグ内に配置すると、ブラウザはまず HTML ページ全体を解析し、次に js をダウンロードして解析します。 3. body 終了タグの後に配置すると、ブラウザはその前の "" を無視するため、実際の効果は body 終了タグの前に記述した場合と変わりません。

scriptタグは通常HTMLのどこに書かれているのでしょうか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

通常、script タグは先頭または末尾に配置されます。先頭は head タグ内、末尾は body 内、または body 終了タグの後に配置されます。

1. head タグ内に script タグを配置します

    <title>获取DOM元素</title>
    <script>
        var myElement = document.getElementById("atag");
        console.log(myElement);
    </script>


    <div>
        <p>一个标签</p>
    </div>
ログイン後にコピー

印刷結果:

scriptタグは通常HTMLのどこに書かれているのでしょうか?
script タグを配置するとhead タグ内 ブラウザが HTML を解析するとき、script タグを解析するとき、最初にすべてのスクリプトをダウンロードし、次に他の HTML の解析を続けます。ブラウザが js をダウンロードする場合、複数の js を同時にダウンロードすることはできません。また、ブラウザが js をダウンロードすると、他の HTML の解析がブロックされます。したがって、head に script タグを配置すると、Web コンテンツに遅れが生じ、ユーザー エクスペリエンスが低下します。

2. script タグを body タグの中に配置します

    <div>
        <p>一个标签</p>
    </div>
<script>
    var myElement = document.getElementById("atag");
    console.log(myElement);
</script>
ログイン後にコピー

scriptタグは通常HTMLのどこに書かれているのでしょうか?

##script タグを body の最後に配置し、ブラウザは最初にそれを解析します HTML ページ全体を完成させてから、js をダウンロードします この場合、js の実行でエラーがあったとしても、DOM ドキュメントが実行されるため、少なくともページ内の要素はまだ読み込むことができます上から下へ順番に並べます。ただし、js に大きく依存している一部の Web ページでは、これは非常に遅くなるように見えます。

3. script タグは body 終了タグの後に配置されます。
    <div>
        <p>一个标签</p>
    </div>

<script>
    var myElement = document.getElementById("atag");
    console.log(myElement);
</script>
ログイン後にコピー

scriptタグは通常HTMLのどこに書かれているのでしょうか?## script タグは body 終了タグの前後に配置されますが、 body 終了タグを指定した場合の印刷結果は同じですが、HTML 2.0 から

body 終了タグの後に

を置くのは規格外です。ブラウザがエラーを報告しない理由は、body タグまたは要素の開始タグの後に が表示される場合、それは prase error (構文エラー) となり、前の

以上がscriptタグは通常HTMLのどこに書かれているのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート