外部JavaScriptの参照と自分のコピーのホスト

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

私は両方の長所を見ることができます：

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

両方を行う必要があります。

Googleなどの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>

HTML要素を閉じてスクリプトが失敗するため、要素</script>内に何も書き込まないようにしてください<script>。簡単な解決策は、エスケープとしてバックスラッシュを使用することです<\/script>。

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

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

_{両方を行う別の理由：}

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

私は同じ質問をして、この記事を読んで、GoogleにjQueryライブラリをホストさせるというアイデアに夢中になりました。

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

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

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

個人的には、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から取得されますが、何らかの理由でロードされない場合、次の行でそれをユーザーのサーバーからロードします。

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の使用にはまだいくつかのサポートの問題があるので、http：//リンクをすべて//に変更できますか？しかし、少なくとも何らかの方法で潜在的な混合コンテンツの警告を処理するようにしてください。

GoogleのAPIライブラリを参照する必要があります。

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

私は間違っている可能性がありますが、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>

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