62

この質問は、いくつかのことを明確にするためのものです。このようないくつかのことは以前に尋ねられました、そしてこれはそれらすべてを1つの質問にまとめます-JavaScriptはHTMLドキュメントのどこに行くべきですか、あるいはもっと重要なことに、それは重要ですか？だから、私が求めていることの1つは、

<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>

（機能の点で）まったく異なる

<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>

さらに重要なことに、DOMの要素を何らかの方法で変更または使用するJSに焦点を当てたいと思います。document.getElementById("test").innerHTML = "Hello world!"ですから、以前<element id="test"></element>のようなものをボディに入れると、ボディが上から下にロードされ、最初にJSがロードされてから、そうでない要素を操作しようとするため、機能しないことがわかります。まだ存在します。したがって、上記のように、タグ内<head>またはタグの直前に配置する必要があり</body>ます。問題は、整理と並べ替え以外に、これらのどれを選択するかが重要であり、そうであれば、どのように選択するかです。

もちろん、3番目の方法もあります-jQueryの方法：

$(document).ready(function(){ /*Code goes here*/ });

そうすれば、すべてがロードされたときにのみ実行されるため、コードを本文のどこに配置してもかまいません。ここでの問題は、必要なメソッドをスクリプトの正確な配置に置き換えることができるメソッドを使用するためだけに、巨大なJSライブラリをインポートする価値があるかどうかです。ここで少し片付けたいのですが、答えたい方はどうぞ！要約：さまざまな種類のスクリプト（頭または体）をどこに配置する必要がありますか、および/またはそれは重要ですか？jQueryは、準備ができたイベントのためだけに価値がありますか？

4

3 に答える 3

60

最も推奨される方法は、</body>タグの前に配置することです。Yahooのパフォーマンス記事は、 YSlowとPageSpeed以外のアドオンがそれぞれYahooとGoogleによって提供されていることも示唆しています。

上記のリンク先のYahooの記事からの引用：

スクリプトによって引き起こされる問題は、スクリプトが並列ダウンロードをブロックすることです。HTTP / 1.1仕様では、ブラウザがホスト名ごとに並行してダウンロードするコンポーネントは2つ以下であることが推奨されています。複数のホスト名からイメージを提供する場合、3つ以上のダウンロードを並行して実行できます。ただし、スクリプトのダウンロード中は、ホスト名が異なっていても、ブラウザは他のダウンロードを開始しません。

スクリプトをタグに入れる<head>と、ブラウザはスクリプトを探し、スクリプトが読み込まれるまで他のものを保留にします。スクリプトが読み込まれると、ユーザーはページの読み込みが遅いように感じます。これが、スクリプトを一番下に配置する必要がある理由です。

はどうかと言うと：

$(document).ready(function(){/*Code goes here*/});

DOMが使用可能で、操作の準備ができたときに発生します。コードを最後に配置する場合、必ずしもこれは必要ありませんが、 DOMが使用可能になったらすぐに何かを実行したいので、通常はこれが必要です。

于 2012-06-12T10:03:58.283 に答える
29

script一般的な方法ですが、タグをに入れることheadは、スクリプトがダウンロードされて処理されるまで（または、asyncまたはdeferそれらをサポートするブラウザを除いて）ページのレンダリングを保持するため、通常はお勧めできません。

通常の推奨事項はscript、タグの最後body、たとえばの直前にタグを配置すること</body>です。そうすれば、スクリプトの上のすべてのDOM要素にアクセスできるようになります（以下のリンクを参照）。その際の注意点の1つは、ページが少なくとも部分的にレンダリングされたが、スクリプトが（まだ）処理されていない場合があり、ユーザーがページの操作を開始すると、イベントを発生させるために何かを行う可能性があることです。スクリプトにはまだフックする時間がありません。したがって、そのことに注意する必要があります。これがプログレッシブエンハンスメントの理由の1つです。これは、ページがJavaScriptなしで機能するが、JavaScriptを使用するとより適切に機能するという考えです。JavaScriptなしではまったく機能しないページ/アプリを実行している場合は、インラインを含めることができますbodyタグの上部にあるスクリプト（たとえば<script>minimal code here</script>）は、バブリングイベントをフックしdocument.body、スクリプトがロードされたときにアクションのためにキューに入れるか、ユーザーに待機するように要求します。

jQueryのような機能を使用するreadyことは問題ありませんが、ライブラリの外部では実際には必要ありません（たとえば、scriptタグの場所を制御している場合は、通常は使用する必要はありませんが、jQueryプラグインを作成している場合は-その中で、ロード時に何かを行う必要があります[これは比較的まれで、通常は呼び出されるのを待つだけです]、通常はそうします）。

もっと読む：

于 2012-06-12T10:05:13.027 に答える
7

次のような操作を行うことで、JavaScriptを並行してダウンロードできます。

(function () {
    var ele = document.createElement('script');
    ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
    ele.id = "JQuery";
    ele.onload = function () {
        //code to be executed when the document has been loaded
    };
    document.getElementsByTagName('head')[0].appendChild(ele);
})();

縮小されたJQueryv1.7.2をGoogleからダウンロードする例では、これはJQueryをダウンロードするための良い方法です。GoogleからダウンロードするのはCDNを使用するようなものであり、ユーザーが同じファイルを使用するページにアクセスした場合は、キャッシュされる可能性があります。そのため、ダウンロードする必要はありません

これについては、ここで本当に良いGoogle技術の話がありますhttp://www.youtube.com/watch?v=52gL93S3usU&feature=plcp

于 2012-06-12T10:46:23.770 に答える