2010-11-23 15 views
2

次のように私はheadタグでJavaScriptを置く場合:JavaScriptは他のコンテンツの読み込みを妨害しますか?

<head> 
<script type="text/javascript" src="jQuery.js"></script> 
<script type="text/javascript"> 
// my jscript 
    </script> 

</head> 

が、それはなどの画像、テキスト、など、他のコンテンツの読み込みを妨げるだろうか?私はちょうど私の友人と議論した。彼はそれがウェブサイトのデザインの読み込みを妨げるだろうと述べた。

答えて

2

はい、asyncまたはdeferを使用しない限り、javascriptはHTMLコンテンツの前に読み込まれます。すべての画像/テキストの下にスクリプトを移動し、最後のbodyタグの前に置くことができます。

今日では、しかし、ブラウザは、あなたが過度に複雑なサイトを持っていない限り、それは問題のその巨大ではないことを非常に高速です。言うまでもなく、jQueryは各繰り返しでより速く、より速くコンパクトになります。

もう一つの側面は、いくつかの近代的なブラウザでは、並行して複数のリソースをロードすることですので、それはこれらのブラウザでは問題の多くはない可能性があります。私は外部スクリプトのロードが完了し、実行を終了するまではい、それはレンダリングからページを防ぐことができます...多分他の誰かがいくつかの洞察を提供します、

+0

素晴らしい!良い返答をありがとう。私はこれを今もっと多く理解しています。 – Sinzo

+0

@Sinzo jQuery(または他の一般的なライブラリ)を使用している場合は、CDN(コンテンツ配信ネットワーク、データをもっと近づけ、理論的には速くする)でキャッシュに適したパスを使用してください。 [プロダクションアプリに使用するjQueryのURLとその理由](http://stackoverflow.com/questions/1535673/which-jquery-url-to-use-for-production-app-and-why)これは同じライブラリが多くのサイトで使用されているため、新しいフェッチを完全にスキップすることができます(キャッシュされている場合でも、クエリーがあってもCDNで高速になる可能性があります) - 光の速度は有限です。 –

0

をこの複雑な詳細を知りません。

1

はいそうです。

そして、(jQuery内で利用可能である)「準備」コールバックを使用することが重要である理由です。これは、ページの読み込みが完了した後にのみコードが実行されるようにする適切な方法です。ほとんどの場合、これが必要です。

<head> 
<script type="text/javascript" src="jQuery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
      // my jscript 
    } 
    </script> 

</head> 
0

あなたがより速くページの読み込みにに関して懸念がある場合:上部の

プットCSS、JavaScriptの下部にあります。スティーブ・ソーダーズ(ハイパフォーマンスのWebサイト、オライリー) はあなたの頭の中でトップにスタイルシートを移動する要素は、ページがそれらが徐々に をロードできるようにすることで、より高速な読み込みますことを見出しました。スクリプトで

、逆は真です。可能であれば、外部のJavaScript ファイルをページの末尾に移動するか、 のJavaScriptファイルの読み込みを遅らせたり延期したりしてください。

プログレッシブレンダリングは あなたのHTML内のスクリプトの後に置かれているすべてのコンテンツのためにブロックされます。

関連する問題