4

http://html5boilerplate.com/のボイラープレートがWeb コンテンツの後に jQuery を宣言するのはなぜでしょうか? これには正当な理由がありますか？

これはコードのスニペットです...

  <!-- Add your site or application content here -->
    <p>Hello world! This is HTML5 Boilerplate.</p>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

PS window.jQuery ||part は何をしますか?

4

3 に答える 3

10

CDN コピーが正しく読み込まれたかどうかを確認します。そうでない場合は、ローカル コピーを読み込みます。

ページで jQuery を実行すると、グローバルjQuery変数が作成されます。これは、グローバル オブジェクトのプロパティとしてもアクセスできます: window.jQuery. jQuery が実行されていない場合は、window.jQueryになりますundefined。

これ||は、次の簡略版です。

if ( window.jQuery == undefined ) {
    document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>');
}

これにより、Google の CDN がダウンした場合 (またはブラウザがアクセスできない場合ajax.googleapis.com) に、サイトが壊れることはありません。代わりに、jQuery の同一のコピーがドメインから提供されます。

一番下にあるのは、Yahoo のパフォーマンス ガイドが推奨しているためです。

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

[...]

スクリプトを延期できる場合は、ページの下部に移動することもできます。これにより、Web ページの読み込みが速くなります。

詳細については、このトピックに関する Steve Souders の優れた記事を参照してください。

于 2013-02-01T21:00:44.250 に答える
2

Javascript を HTML ファイルのどこに配置しますか? ページの下部に JavaScript を配置するのが良い理由について説明します。基本的に、ページの読み込みが速くなるからです。

window.jQuery ||CDN から jQuery をダウンロードしたことを確認しています。そうでない場合 (CDN がダウンしているとしましょう)、ローカル ファイルが使用されます。

于 2013-02-01T21:01:31.540 に答える
2

JavaScript がページの読み込みをブロックしないように、コンテンツの後に JavaScript を配置するのが常に最善です。

詳細については、Steve Sounder のブログ投稿を参照してください。

window.jQuery ||CDN コピーが利用できない場合、パーツはローカルでホストされているコピーから jQuery を読み込みます。

基本的に、script タグは、非常に高速で世界中にある Google のサーバーから jQuery をロードします。さらに、多くのサイトが Google のサーバーから jQuery をロードするため、多くの人が jQuery をブラウザーにキャッシュしています。いずれにせよ、人々は本当に早くそれを手に入れるでしょう。

問題は、Google のサーバーがダウンしている場合、jQuery のロードに失敗することです。jQuery が Google からロードされた後の行で、このようなありそうもない事態から私たちを守るために、JavaScript 式があります。条件式A OR Bです。この場合、式の左側は jQuery 変数です。Google から正常にロードされた場合、これは jQuery グローバル オブジェクトになり、JavaScript では「真の」値であり、true と評価されます。OR 式では一方が true の場合、B 側を評価する必要がないため、JavaScript はこのコード行の残りを実行しません。これを短絡評価と呼びます。

jQuery が Google CDN からの読み込みに失敗した場合、グローバル jQuery 変数は未定義になります。これは「誤った」値であるため、JavaScript は OR 式の右側を実行します。この場合の右側は、ページに新しいスクリプト タグを書き込みます。新しいスクリプト タグは、このサイトをホストしている同じサーバーを意味する相対ドメインから jQuery を読み込みます。Google から読み込むほど速くはないかもしれませんが、少なくとも動作することはわかっています。

于 2013-02-01T21:01:51.193 に答える