どこからjQueryライブラリを含めますか？Google JSAPI？CDN？

jQueryとjQuery UIを含める方法はいくつかありますが、人々は何を使っているのでしょうか？

• Google JSAPI
• jQueryのサイト
• 自分のサイト/サーバー
• 別のCDN

私は最近Google JSAPIを使用していますが、SSL接続のセットアップ、またはgoogle.comの解決だけに長い時間がかかることがわかりました。私はGoogleで以下を使用しています。

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>

他のサイトにアクセスしたときにキャッシュされ、サーバーの帯域幅を節約するためにGoogleを使用するのが好きですが、サイトの遅い部分のままである場合は、インクルードを変​​更する場合があります。

あなたは何を使うのですか？何か問題がありましたか？

編集： jQueryのサイトにアクセスしたばかりで、次の方法を使用しています：

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

Edit2：昨年問題なくjQueryを含めてきた方法は次のとおりです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

違いは、の削除ですhttp:。これを削除すると、httpとhttpsの切り替えについて心配する必要がなくなります。

私は間違いなく、JQueryをGoogle APIサーバーで処理することを選択しました。他のGoogle APIを利用していないため、jsapiメソッドを使用しませんでしたが、変更された場合はそれを検討します...

まず、Googleのapiサーバーは、私の単一のサーバーの場所ではなく、世界中に分散されています。通常、サーバーが近いほど、訪問者の応答時間が速くなります。

2番目：多くの人がJQueryをGoogleでホストすることを選択しているため、訪問者が私のサイトにアクセスしたとき、ローカルキャッシュに既にJQueryスクリプトがある可能性があります。事前にキャッシュされたコンテンツは通常、訪問者の読み込み時間を短縮します。

3番目： Webホスティング会社が、使用した帯域幅に対して料金を請求します。訪問者が他の場所で同じファイルを取得できる場合、ユーザーセッションごとに18kを消費する意味はありません。

正しいスクリプトファイルを提供し、オンラインで利用できるようにすることをGoogleに信頼していることを理解しています。この時点まで、私はGoogleの使用に失望していなかったので、意味がなくなるまでこの構成を続けます。

指摘する価値のあること...サイトに安全なページと安全でないページが混在している場合、安全なページに安全でないコンテンツを読み込むときに表示される通常の警告を回避するために、Googleソースを動的に変更することができます。

これが私が思いついたものです：

<script type="text/javascript">
    document.write([
        "\<script src='",
        ("https:" == document.location.protocol) ? "https://" : "http://",
        "ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>" 
    ].join(''));
</script>

2010年9月8日更新-HTTPとHTTPSを削除し、次の構文を使用するだけでコードの複雑さを軽減するための提案がいくつか行われています。

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

さらに、jQueryライブラリの最新のメジャーバージョンがロードされていることを確認したい場合は、jQueryメジャー番号を反映するようにURLを変更することもできます。

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

最後に、Googleを使用せずにjQueryを使用する場合は、次のソースパスを使用できます（jQueryはSSL接続をサポートしていないことに注意してください）。

<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>

外部サーバーでホストしたい理由の1つは、特定のサーバーへの同時接続のブラウザー制限を回避することです。

ただし、使用しているjQueryファイルはそれほど頻繁に変更されない可能性が高いため、ブラウザーキャッシュが作動し、そのポイントの大部分が無効になります。

外部サーバーでホストする2つ目の理由は、自分のサーバーへのトラフィックを減らすことです。

ただし、jQueryのサイズを考えると、トラフィックのごく一部になる可能性があります。おそらく、実際のコンテンツを最適化することを試みるべきです。

jQuery 1.3.1 minのサイズはわずか18kです。私はそれが最初のページのロードで尋ねるにはあまりにも多くのヒットであるとは思わない。その後キャッシュされます。その結果、私は自分でホストしています。

Googleを使用したい場合は、直接リンクの方が反応がよい場合があります。各ライブラリには、ダイレクトファイルのパスがリストされています。これはjQueryパスです

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

質問をもう一度読んでください。httpsを使用している理由はありますか？これは、Googleリストのスクリプトタグの例です。

<script src="http://www.google.com/jsapi"></script>

私が開発したパブリックサイトが外部サイトに依存することを望まないので、jQueryを自分でホストします。

他のサイト（Google、jquery.comなど）がダウンしたときに、サイトが停止してもかまいませんか？依存関係が少ないことが重要です。

長所：Host on Googleにはメリットがあります

• おそらくより高速です（サーバーはより最適化されています）
• それらはキャッシングを正しく処理します-1年（サーバー上でヘッダーを正しく取得するために変更を加えることを許可されるのに苦労しています）
• 別のドメインでGoogleがホストするバージョンへのリンクをすでに持っているユーザーは、ファイルをキャッシュに既に持っています

短所：

• 一部のブラウザでは、XSSクロスドメインと見なされ、ファイルが許可されない場合があります。
• 特にFirefox用のNoScriptプラグインを実行しているユーザー

GoogleからINCLUDEしてから、グローバル変数などの存在を確認し、サーバーからの負荷がないかどうかを確認しますか？

ここにはいくつかの問題があります。まず、指定した非同期読み込みメソッド：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('jquery', '1.3.1');
  google.setOnLoadCallback(function() {
    // do stuff
  });
</script>

いくつかの問題があります。スクリプトタグは、取得中にページの読み込みを一時停止します（必要な場合）。ロードが遅い場合、これは悪いことですが、jQueryは小さいです。上記のメソッドの本当の問題は、jquery.jsの読み込みが多くのページで独立して行われるため、jqueryが読み込まれる前に読み込みとレンダリングが完了し、実行するjqueryのスタイルがユーザーに表示される変更になることです。

もう1つの方法は次のとおりです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

簡単な例を試してみてください。単純なテーブルを用意し、setOnLoadCallback（）メソッドと$（document）.ready（）を静的jquery.min.jsでロードして、セルの背景を黄色に変更します。2番目の方法では、ちらつきは目立ちません。最初の意志。個人的には、これは良いユーザーエクスペリエンスとは言えません。

例としてこれを実行します：

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    .odd { background-color: yellow; }
  </style>
</head>
<body>
<table>
  <tr><th>One</th><th>Two</th></tr>
  <tr><td>Three</td><td>Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
  <tr><td>Seven</td><td>Nine</td></tr>
  <tr><td>Nine</td><td>Ten</td></tr>
</table> 
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
    $(function() {
      $("tr:odd").addClass("odd");
    });
  });
</script>
</body>
</html>

テーブルが表示され、行が黄色に変わるはずです（はずです）。

google.load（）メソッドの2番目の問題は、限られた範囲のファイルしかホストしないことです。これはプラグインに非常に依存しているため、jqueryの問題です。<script src="...">タグ付きのjqueryプラグインを含めようとした場合google.load()、プラグインはまだロードされていないため、おそらく「jQueryが定義されていません」というメッセージで失敗します。私はこれを回避する方法を本当に見ていません。

3番目の問題（どちらの方法でも）は、それらが1つの外部負荷であることです。いくつかのプラグインと独自のJavascriptコードがあるとすると、Javascriptをロードするための最低2つの外部要求があります。おそらく、jquery、関連するすべてのプラグイン、および独自のコードを取得し、それを1つの縮小ファイルに入れる方が良いでしょう。

以下からのホスティングのためのはずです使用GoogleのAjaxのライブラリのAPI？：

ロード時間に関しては、実際には2つのスクリプト（jsapiスクリプトとmootoolsスクリプト（上記の圧縮バージョン））をロードしています。つまり、1つではなく2つの接続になります。私の経験では、それがGoogleからのものであったとしても、ロード時間は実際に自分の個人共有サーバーからロードするよりも2〜3倍遅く、圧縮ファイルのバージョンはGoogleよりも数K大きかったことがわかりました。これは、ファイルがロードされ、（おそらく）キャッシュされた後でもです。つまり、帯域幅はそれほど重要ではないので、私にとっては重要ではありません。

最後に、ある種のXSS試行として要求にフラグを立てる偏執狂的なブラウザーの潜在的な問題があります。通常、これはデフォルト設定の問題ではありませんが、企業ネットワークでは、セキュリティ設定はもちろん、ユーザーが使用するブラウザを制御できない可能性があるため、問題が発生する可能性があります。

したがって、結局のところ、私がjQueryにGoogle AJAX APIを使用しているのを実際に見ることはできません（より「完全な」APIは、いくつかの点で別の話です）。

独自のサーバーでホストするようにアドバイスする人に加えて、別のドメイン（たとえば、static.website.com）に保持して、ブラウザーが他のコンテンツスレッドから個別にロードできるようにすることを提案しました。このヒントは、すべての静的なもの、たとえば画像やCSSでも機能します。

Googleでホストされているライブラリに-1票を投じる必要があります。彼らは、これらのライブラリのラッパーを使用して、Googleアナリティクススタイルのデータを収集しています。少なくとも、クライアントブラウザーが私が要求する以上のことをしたくはありません。さらに悪いことに、これは邪悪ではないというGoogleの「新バージョン」です。控えめなJavaScriptを使用して、より多くの使用状況データを収集します。

注：彼らがこの慣習を変えたなら、超。しかし、最後にそれらのホストされたライブラリの使用を検討したとき、私は自分のサイトのアウトバウンドhttpトラフィックを監視しました、そしてGoogleサーバーへの定期的な呼び出しは私が見るものではありませんでした。

私はこれについて昔ながらの人かもしれませんが、私はまだホットリンクに眉をひそめています。たぶんグーグルは例外ですが、一般的に、それはあなた自身のサーバーでファイルをホストするための本当に良いマナーです。

これを、これらのファイルをローカルでホストする理由として追加します。

最近、TWCの南カリフォルニアのノードはajax.googleapis.comドメイン（IPv4のユーザー用）のみを解決できなかったため、外部ファイルを取得していません。これは昨日まで断続的でした（現在は永続的です）。断続的だったので、SaaSユーザーの問題のトラブルシューティングには多くの問題がありました。何人かのユーザーがソフトウェアに問題がなかった理由を追跡するために数え切れないほどの時間を費やし、他のユーザーは戦っていました。私の通常のデバッグプロセスでは、ユーザーにIPv6をオフにしているかどうかをユーザーに尋ねる習慣はありません。

私はこの特定の「ルート」をファイルに使用しており、IPV4のみを使用しているため、この問題に遭遇しました。私は、jqueryがロードされていないことを伝える開発者ツールの問題を発見し、トレースルートなどを実行し始めて、実際の問題を見つけました。

この後、私は外部でホストされているファイルに戻ることはほとんどありません。理由は、Googleがこれを問題にするためにダウンする必要がないことです。そして、これらのノードのいずれかがDNSハイジャックで侵害され、悪意のあるjsを配信する可能性があります。実際のファイルの代わりに。グーグルドメインがダウンすることは決してないという点で常に安全だと思っていましたが、ユーザーとホストの間にあるノードが失敗する可能性があることがわかりました。

jQueryサイトの最新バージョンhttp://code.jquery.com/jquery-latest.pack.jsを含めるだけです。 これは私のニーズに合っており、更新について心配する必要はありません。

編集：主要なウェブアプリの場合、確かにそれを制御してください。それをダウンロードして自分で提供してください。しかし、私の個人的なサイトでは、私はそれほど気にできませんでした。物事は魔法のように消えるわけではなく、通常は最初に廃止されます。今後のリリースで何を変更すればよいかを知るのに十分なペースで対応します。

ここにいくつかの役立つリソースがあります。希望がCDNの選択に役立つことを願っています。MSは最近、CDNを介してライブラリを配信するための新しいドメインを追加しました。

古い形式：http : //ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js 新しい形式：http : //ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

これにより、microsoft.comのすべてのCookieが送信されるわけではありません。 http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_11

ここでは、すべてのテクノロジーにわたってWebで使用されている最も人気のあるテクノロジーに関するいくつかの統計を示します。 http://trends.builtwith.com/

希望はあなたが選ぶのを助けることができます。

私が「ライブ」サイトを担当している場合は、自分のサイトで起こっているすべてのことをよく知っています。そのため、同じサーバーまたは静的/外部サーバーでjquery-minバージョンを自分でホストしますが、すべての変更を検証/テストした後で、自分（またはプログラム/プロキシ）だけがライブラリを更新できる場所に置きます

頭の中：

  (function() {
    var jsapi = document.createElement('script'); jsapi.type = 'text/javascript'; jsapi.async = true;
    jsapi.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.google.com/jsapi?key=YOUR KEY';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('head')[0]).appendChild(jsapi);
  })();

体の終わり：

<script type="text/javascript">
google.load("jquery", "version");
</script>

私はそれを自分のサーバー上の他のjsファイルと一緒にホストします、そしてそれがポイントです、それらを結合して縮小し（django-compresserを使用して、ここではポイントではありません）、1つのjsファイルとして提供され、すべてのサイトを提供しますそれに入れる必要があります。いずれにしても、独自のjsファイルを提供する必要があるので、そこにもjqueryバイトを追加しない理由はないと思います。KBの方が、リクエストの数を増やすよりも転送の方がはるかに安価です。あなたは誰にも依存していません、そしてあなたの縮小されたjsがキャッシュされるとすぐに、あなたもまた超高速です。

自分のサーバーから追加のjqueryキロバイトをロードする必要があるため（ただし、追加のリクエストなしで）、最初のロード時にCDNベースのソリューションが有効になる場合があります。ただし、その違いは目立ちません。そして、キャッシュがクリアされた最初のロードでは、CDN jqueryをフェッチするために必要なリクエスト（およびDNSルックアップ）が多くなるため、独自のホスト型ソリューションはおそらくずっと高速になります。

この点についてはほとんど言及されておらず、CDNが世界をどのように引き継いでいるように見えるのでしょうか。