BinaryDevelop
  1. ホーム
  2. javascript

HTMLの<script>タグの位置は、ウェブページのパフォーマンスに影響しますか？

2023-10-11 14:58:53

質問

scriptタグがHTMLページのbodyの上や下にある場合、Webサイトのパフォーマンスには関係ないのでしょうか？

また、このように間に使用された場合はどうでしょう。 

<body>
..blah..blah..
<script language="JavaScript" src="JS_File_100_KiloBytes">
function f1() {
.. some logic reqd. for manipulating contents in a webpage
}
</script>
... some text here too ...
</body>

それともこっちの方がいいのかな？ 

<script language="JavaScript" src="JS_File_100_KiloBytes">
function f1() {
.. some logic reqd. for manipulating contents in a webpage
}
</script>
<body>
..blah..blah..
..call above functions on some events like onclick,onfocus,etc..
</body>

それともこれ？ 

  <body>
    ..blah..blah..
    ..call above functions on some events like onclick,onfocus,etc..
<script language="JavaScript" src="JS_File_100_KiloBytes">
    function f1() {
    .. some logic reqd. for manipulating contents in a webpage
    }
    </script>
    </body>

言うまでもないことですが、すべてが再び <html> タグの中にあります!

読み込み中にウェブページのパフォーマンスにどのような影響を与えるのでしょうか？本当にそうでしょうか？ この3つのうちどれが一番いいのか、それともあなたが知っている他のものがいいのか？

そしてもう一つ、私はこのことについて少しググって、そこからここに行きました。 Web サイトを高速化するためのベスト プラクティス というのがあって、それによると スクリプトを一番下に配置する とありますが、従来は多くの人が <head> タグの上にある <body> タグの上に記述します。これはルールではありませんが、多くの人がこの方法を好んでいます。もし信じられないのであれば ソースを見る をご覧ください。そして、最高のパフォーマンスを発揮するために、どのようなスタイルが良いのか教えてください。

どのように解決するのですか？

Javascript の資産は、デフォルトで、他の並列ダウンロードが発生しないようにブロックされる傾向があります。そのため、もしあなたがたくさんの <script> タグがたくさんある場合、複数の外部スクリプトを呼び出すことで HTML が読み込まれないため、ユーザーには真っ白な画面が表示されます。 まで JS ファイルが完全に読み込まれるまで、ページの他のコンテンツは 読み込まれないからです。

この問題に対処するため、多くの開発者はJSをHTMLページの下部（の前）に配置することを選択しました。 </body> タグの前）に配置することを選択しました。これは、ほとんどの場合、ユーザーがサイトとやり取りを始めるまで JS は必要ないため、論理的だと思われます。JS ファイルを一番下に配置することで、プログレッシブ レンダリングも可能になります。

別の方法として、Javascript ファイルを非同期に読み込むこともできます。これを実現するための既存の方法はたくさんあります。

XHR評価 

var xhrObj = getXHRObject();
xhrObj.onreadystatechange = 
  function() { 
    if ( xhrObj.readyState != 4 ) return;
    eval(xhrObj.responseText);
  };
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');

スクリプトDOM要素 

var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);

ミーボ・イフレームドJS 

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();

いくつか挙げると...

ノート : 現在のブラウザでは、最大5つのスクリプトを並行して読み込むことができます。

について IE があり、そこに defer という属性があり、このように使うことができます。 

<script defer src="jsasset.js" type="text/javascript"></script>

設定された場合、このブーリアン属性は は、ユーザエージェントに スクリプトは を生成しない（例えば、javascript で javascript の "document.write" がない)。 したがって，利用者エージェントは，解析及びレンダリングを継続することができる。 パースとレンダリングを続けることができます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します