web-dev-qa-db-ja.com

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

スクリプトタグがHTMLページの本文の上または下にある場合、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つまたはあなたが知っている他の3つのうち、どれが最良ですか？

そしてもう1つ、私はこれについて少しグーグルで調べて、そこから私はここに行きました： あなたのWebサイトを高速化するためのベストプラクティス とそれは putスクリプトを提案します一番下 ですが、伝統的に多くの人がそれを<head>タグは<body>タグ。私はそれがルールではないことを知っていますが、多くの人はそのようにそれを好みます。信じられない場合は、このページのソースを表示してください！そして、最高のパフォーマンスのためのより良いスタイルは何か教えてください。

javascripthtmlperformanceoptimization
64
Pratik

Javascriptアセットは、デフォルトでは、他の並行ダウンロードの発生をブロックする傾向があります。ですから、<script>タグ内の複数の外部スクリプトを呼び出すと、HTMLの読み込みがブロックされ、ページに他のコンテンツが読み込まれないため、空白の白い画面が表示されますJSファイルが完全にロードされるまで。

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

または、Javascriptファイルを非同期に読み込むこともできます。次の方法でこれを達成できる多くの既存の方法があります。

XHR Eval

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);

Meebo Iframed JS

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

いくつか例を挙げると...

注：現在のブラウザでは、最大5つのスクリプトのみを並行してロードできます。

For IEには、次のように使用できる defer 属性があります。

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

設定されると、このブール属性は、スクリプトがドキュメントコンテンツを生成しないというヒントをユーザーエージェントに提供し（たとえば、javascriptに "document.write"がない）、ユーザーエージェントは解析とレンダリングを続行できます。

67
Russell Dias

私はこれが古い議論であることを知っていますが、私はこのトピックについて読んでいて、StackOverflowに関する他の答えを読んでいます...

JQueryタグを配置する場所は実際には関係ありません。

最後に、永続的な民間伝承についての言葉。 「JavaScriptを常に終了タグの直前にページの下部に配置する」という頻繁に繰り返されるアドバイスに遭遇したかもしれません。 Webブラウザはスクリプトを順次ロードし、各スクリプトが完了するまでロードとレンダリングをブロックしたため、これはかつて真実でした。これはもはや真実ではありません。最新のブラウザは「プリロードスキャン」を実行し、head要素またはページの下部にリストされているかどうかにかかわらず、すべてのスクリプトのロードを並行して開始します。多くの場合、外部JavaScriptは非同期に読み込まれ、ページが読み込まれてDOMの準備ができるまで実行されないように記述されています。 head要素にスクリプトをロードすることは、もはや悪い習慣ではありません。

http://railsapps.github.io/Rails-javascript-include-external.html

24
reectrix

ドキュメントの上部にあるスクリプト要素はすぐに使用可能になります（したがって、イベントハンドラーをバインドし、要素が使用可能になったらすぐにJSを実行できます）が、ページの残りの部分の解析はブロックされます。

一番下のスクリプト要素は（そうすることはできません）ありませんし、重要なページが残っていないので、それがブロックされているかどうかは関係ありません。

どちらがbestかは、相対的な 重要性 JSがVsを実行する優先順位（ケースバイケースで決定する必要があります）。 HTMLレンダリングを持つ。

一番下のスクリプト要素はinside body要素である必要があることに注意してください。したがって、次のようになります。

<script>...</script></body></html>

ではなく

</body><script>...</script></html>
16
Quentin

はい、Webページのパフォーマンスに影響します。

JavaScriptの問題は、ページの残りの実行/読み込みをブロックすることです。 JavaScriptに時間がかかるものがある場合、ページの残りの部分が読み込まれません。

これらの例を参照してください。

アラートがページの残りのレンダリングに与える影響を確認できます。ページの上部に配置したJavaScriptでも同じ効果があります。一般に、ページのレイアウトに重要なもの（メニュープラグインなど）を配置することをお勧めします。ユーザーとの対話が必要なもの（ポップアップハンドラー）またはユーザーがまったく関与しないもの（Googleアナリティクス）は、ページの一番下に移動する必要があります。

scriptタグをコードに挿入するレイジーローダーを取得できます。コードはHTML上にないので、ページ全体が正しくレンダリングされ、含めるJSが何もブロックしないことを確認できます。

11
Jonathon Bolster

はい、Webページの読み込みのパフォーマンスに影響します。

問題は、通常の<script>タグはブロックしているため、スクリプトタグの後のすべては、スクリプトタグの読み込みと解析が完了するまで待ってから、ページの残りの部分を読み込むことができます。

誰かがおそらくあなたがasync="true"スクリプトタグでは、ブロックされません。しかし、それはまだいくつかのブラウザでのみサポートされているため、まだ一般的なケースには役立ちません。

いずれにせよ、一般に、スクリプトタグをページの下部に配置して、ページの他の部分を保持しないようにすることをお勧めします。

5
Wolph

まず、body/head要素内にないスクリプトタグは無効なHTMLを作成し、一部のブラウザーで例外を発生させることさえあります。

Head要素内のスクリプトタグは、HTMLがレンダリングされる前にロードおよび解釈され、HTML/CSSレンダリングがブロックされます。

Bodyタグの下部にあるスクリプトタグはHTML/CSSをブロックしません。DomReadyでのみDOMを操作できるため、これはJavaScriptを配置するのに最適な位置です。補足として、domReadyイベントラッパーを使用する必要さえありません。

または、 [〜＃〜] labjs [〜＃〜] および RequireJS などのライブラリを使用して、headタグからJavaScriptをキックスタートすることもできます（最小限のHTML/CSSブロック） 。これらのライブラリのいずれかを介してロードされたスクリプトは、HTML/CSSレンダリングと並行して実行されます。

<head>
   <script data-main="INITSCRIPT.js" src="require.js"></script>
</head>

INITSCRIPT.js

require( [ "jQuery" , "somePlugin" ] , function(){
   $(document).ready(function(){
      $("#someId").somePlugin();   
   });
} );

上記の例では、require.jsのロードと解釈のみがHTML/CSSレンダリングをブロックしますが、これは通常は重要ではありません。その後、jQueryとsomePluginが並列にロードされるため、HTML/CSSはうまくレンダリングされます。

4
BGerrissen

スクリプト自体のパフォーマンスは間違いなく同じです。

ただし、リンクした記事で説明されているように、ブラウザは<script>タグのコンテンツを検出してロードすると、ページの同時ダウンロードとレンダリングを「停止」（または「フリーズ」）するため、配置は重要です。したがって、おそらくブラウザーにページをレンダリングさせ、CSSスタイルを適用させ、thenに.jsを含めるのがおそらく最善です。ユーザーにとってはより滑らかに見えます。

また、<body>タグを閉じる直前に、おそらくスクリプトを下部に含めることを意味します。

1
Gipsy King