スクリプトを含める、CDN (Google) を使用する、またはウェブサイトのルートにローカルに保存する場合、どちらが高速ですか?
7 に答える
コア jQuery ライブラリを意味する場合は、(内部サイトではなく) インターネットに接続するサイトに google CDN を使用します。
CDN には次の利点があります。
- より多くのサーバー
- 帯域幅 (料金はかかりません)
- 位置情報 (応答時間の短縮)
- 冗長性
- 最適化されたキャッシュ設定
- ユーザーがすでにそこからファイルをキャッシュしている可能性があります
- 並列ダウンロード、ユーザーはサイトから同時に他のコンテンツを取得できます
キャッシュ ヘッダーを同じように構成できますが、おそらくファイルをより高速に提供することはできません。そうは言っても、ライブラリ/CDN はパズルの一部にすぎません。あなたが持っているその他のプラグインとコードも、縮小して結合し、gzip 経由で提供する必要があります。
サーバーの速度によって異なります。ただし、CDN の方がおそらく高速です。クライアントは、別の Web サイトから既にキャッシュされているファイルを持っている可能性があります。
サイトから多くの帯域幅をオフロードしますが、ファイルを維持するためにサードパーティの安定性に依存しています. (Google にすぐに問題が発生することはないと思いますが)
残念ながら、最近の調査によると、Google の CDN が実際にはパフォーマンスを妨げていることが示されています。
Google の AJAX Libraries API は、ネットワーク効果を使用して、共通の共有キャッシュを提供することで、参加しているすべての Web サイトのパフォーマンスを改善しようとしました。しかし、最近の調査によると、ネットワークを使用してクリティカル マスに達し、実際に Web パフォーマンスを向上させる人はほとんどいないことがわかりました。現在、ネットワークを使用する際のオーバーヘッドは、Google の AJAX Libraries API を使用すると実際にパフォーマンスが低下することを意味します。JavaScript ファイルをローカルでホストする必要があります。これにより、帯域幅の消費が増加しますが、ページの読み込み速度が向上します。Zoompf.comパフォーマンス レポート ノートより。
こちらも参照してください。JavaScript ライブラリ CDN を使用する必要がありますか?
Google CDN :-)
1) キャッシュの観点から最適化
2) ユーザーはより最適な CDN ノードからリソースを受け取ります
それらを localStorage / web storage に保存する方がさらに高速です。それを行うための小さなライブラリを作成しましたが、結果は非常に説得力があります
- CDN からの jQuery の読み込み: Chrome 268ms、FireFox: 200ms
- localStorage からの jQuery の読み込み: Chrome 47ms、FireFox 14ms
https://github.com/webpgr/cached-webpgr.jsでコードを確認できます。コードは小さく、数分ですべてを読んで理解できます。
これを使用する方法の完全な例を次に示します。
完全なライブラリ:
function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};
ライブラリの呼び出し
requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
requireScript('examplejs', '0.0.3', 'example.js');
});
他の人が述べた理由から、GoogleのCDNだと思います。
ただし、ターゲット市場がサーバーに近接している場合は、サーバーから配信する方がよい場合があります。
たとえば、OrlandoFloridaPeopleOnly.com/ のサイトがあるとします。サーバーがフロリダ州オーランドでホストされており、Google の最も近いコンテンツ配信サーバーがフロリダ州マイアミとジョージア州アトランタにある場合 (これは事実です)、訪問者がまだキャッシュ コピーを持っていなければ、サーバーは [おそらく] 高速になる可能性があります。 Google CDN からのファイルの。
サーバーから訪問者に静的コンテンツを提供する場合は、サブドメインまたはその他の手段を利用してダウンロードを並列化するようにしてください。念のため、静的コンテンツの Cookie を転送しないでください。
この情報源がどれほど信頼できるかはわかりません: Google データ センター. したがって、必ずしもそれを当てにする必要はありません。
Visual Studio には、Google の CDN の Intellisense に問題があることに注意してください。Microsoft には、Intellisense が正しく機能することを可能にする CDN もあります。しかし、はい、CDN を使用してください。