web-dev-qa-db-ja.com

外部JavaScriptを参照するか、自分のコピーをホストするか

JQueryを使用するWebアプリがあるとします。自分のサーバーで必要なJavaScriptファイルをWebサイトファイルと一緒にホストするか、jQueryのCDN（例： http://code.jquery.com/jquery-1.7.1。 min.js ）？

私は双方のプロを見ることができます：

  • それが私のサーバー上にある場合、それは1つ少ない外部依存関係です。 jQueryがダウンしたり、ホスティング構造などを変更したりすると、アプリが壊れます。しかし、それが頻繁に起こることはないと思います。これを実行している小規模なサイトがたくさんあるはずです。jQueryチームはそれらを壊さないようにする必要があります。
  • それが私のサーバー上にある場合、それは誰かがセキュリティ問題と呼ぶことができる1つ少ない外部参照です
  • 外部から参照されている場合は、ファイルを提供するための帯域幅について心配する必要はありません（ただし、それほど多くはないことがわかっています）。
  • 外部から参照されており、すべてのファイルの独自のコピーを必要とする多くのサーバーにこのWebサイトを展開している場合は、コピー/更新を覚えておかなければならないファイルが1つ少なくなります。
web-developmentjavascriptcss
43
Mr. Jefferson

次の両方を実行する必要があります。

Google's などのCDNからホスティングすることから始めます。これは、お客様のサイトよりも稼働時間が長くなり、応答時間が最速になるように構成されるためです。さらに、CDNにリンクするページにアクセスしたことがあるユーザーは、ファイルのキャッシュされたコピーを使用するため、コピーを再ダウンロードする必要がなく、初期読み込みがさらに高速になります。

次に、CDNがダウンした場合に備えて、フォールバック参照を自分のサーバーに追加します（可能性は低いですが、安全は安全です）。フォールバックは比較的理解しやすいですが、使用するスクリプトに合わせてカスタマイズする必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery) document.write('<script src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>

</script>要素内のどこにも<script>を記述しないでください。HTML要素が閉じてスクリプトが失敗する原因になります。簡単な修正は、バックスラッシュをエスケープとして使用することです：<\/script>。

両方を行うもう1つの理由：

人気のあるCDNを選択した場合、ダウンタイムが発生する可能性はほとんどありませんが、遠い遠い将来（〜18か月後）与えられた ムーアの法則 ）ホスティング形式が変更されたとき、アドレスが調整されたとき、またはネットワークがペイウォールの背後に配置されたときなど、リンクがそのまま機能しなくなる可能性があります。フォールバックを使用する場合、これまでに作成したすべてのWebサイトに戻ってCDNリンクを変更する前に、ホスティング用の新しい形式に調整するための時間が少し与えられます。

別の両方を行う理由：

最近、一連のインターネット障害に見舞われました。スクリプトリソースのローカルコピーをリンクしたプロジェクトでローカルで作業を続けることができ、ローカルコピーをリンクする必要のあるプロジェクトがいくつかあることがすぐにわかりました。

58
zzzzBov

同じ質問があり、それから この記事 を読んだところ、Googleが私のjQueryライブラリをホストできるようにするというアイデアで売られました。

この記事では、ライブラリをGoogleのコンテンツ配信ネットワーク（CDN）でホストできるようにすることの主な利点を説明しています。

  • 遅延の減少-サーバーに物理的に近くないユーザーは、任意に配置されたサーバーから強制的にダウンロードするよりも、GoogleからjQueryをより速くダウンロードできます。
  • 並列処理の増加-ブラウザーは、同時に実行できる接続の数を制限します。ブラウザーによっては、この制限はホスト名ごとに2つの接続まで低くなる場合があります。 Googleを使用するAJAX Libraries CDNを使用すると、サイトへの1つの要求が削除され、より多くのローカルコンテンツを同時にダウンロードできます。
  • キャッシュの改善-Google AJAX Librariesを使用すると、ユーザーはjQueryをダウンロードする必要がない場合があります。他の一方で、jQueryをローカルでホストしている場合、ユーザーはそれを少なくとも1回ダウンロードする必要があります。各ユーザーはおそらくブラウザーのキャッシュに何十もの同一のjQueryのコピーを既に持っていますが、それらのjQueryのコピーはサイトにアクセスすると無視されます。

独自のライブラリをホストすることの利点として挙げた2つの箇条書きについては、それはGoogleがクラウドバージョンをホストしていることと、Googleはそれらが何をしているかを知っており、可用性とセキュリティに関しては信頼できることを覚えておいてください。ただし、@ zzzzBovはこの質問に対する彼の回答で非常に優れた点を示しています。ライブラリのローカルコピーを保存し、何らかの理由でCDNバージョンにアクセスできないという万が一の場合にデフォルトにすることをお勧めします。

35
CFL_Jeff

個人的に、私は http://html5boilerplate.com/ からヒントを得ます

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

これにより、メインのjQueryファイルがGoogleからプルされますが、何らかの理由で読み込まれない場合は、次の行で独自のサーバーから読み込まれます。

17
Adrian J. Moreno

CDNを使用することをお勧めします。そのCDNがGoogleである場合は、@ CFL_Jeffと@Moronsの両方が指摘しているように、なおさら良い方法です。

この回答を追加して、他の場所を指すときに見落とされがちなこと、つまり混合コンテンツの警告を回避することを指摘します。プロトコルのないURLの使用を検討してください。例：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript">
</script>

プロトコルなしのURLの使用にはまだいくつかのサポートの問題があります。SOで すべてのhttp：//リンクを//だけに変更できますか？ の回答を少し見てください。少なくとも、潜在的な混合コンテンツの警告をsomeの方法で処理しようとします。

5
jcmeloni

GoogleのAPIライブラリ を参照してください。

これの主な理由は、ページの読み込みを高速化することです。ユーザーが同じライブラリを参照している別のサイトをすでに訪問している場合、それはすでにブラウザーのキャッシュに保存されており、ダウンロードする必要はまったくありません。

4
Morons

私は間違っている可能性がありますが、document.writeを実装すると、DOMのすべてが上書きされます。本文の最後にJavaScriptファイルを配置することをお勧めします。

以前の回答に基づいて、次の方法を提案します。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

if(!window.jQuery)
{
    //Creates the script element
    var script = document.createElement('script'); 
    //Adds the type attribute with "text/javascript" value
        script.setAttribute('type', 'text/javascript'); 
    //Adds the source attribute and populates it
        script.setAttribute('src', 'Put_The_Relative_Path_To_Your_JavaScript_File_Here'); 
    //Adds it to the end of the body, as it is good practice, to prevent render-blocking.  
    document.body.appendChild(script);

}

//Note that there's no need for you to verify with an onload function, since all scripts
//must be loaded before going to the next one! 

</script>
0
Jose A

ローカルコピーのホスティングはベストプラクティスであることを付け加えたいと思います。上記のいずれも、地理的位置と厳密なホワイトリストが必須である安全な姿勢に関連するものは何も述べられていないためです。そのファイルをローカルでホストしないことは、セキュリティが低下した姿勢をクライアントにプッシュすることを前提としています。

0
Mark