web-dev-qa-db-ja.com

どこから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を切り替える必要はありません。

javascriptjquerysslgoogle-ajax-libraries
242
Darryl Hein

間違いなく、私はJQueryをGoogle APIサーバーによって提供することを選択しました。私は他のGoogle APIを利用していないので、私はjsapiメソッドを使いませんでした、しかしそれが今までに変更されたなら私はそれを検討するでしょう...

First： Googleのapiサーバーは、私の1つのサーバーの場所ではなく世界中に分散しています。サーバーが近いほど、通常、訪問者の応答時間は短くなります。

秒：多くの人がJQueryをGoogleでホストすることを選択しています。そのため、訪問者が私のサイトに来たとき、彼らはすでにローカルキャッシュにJQueryスクリプトを持っているかもしれません。事前にキャッシュされたコンテンツは通常、訪問者の読み込み時間が短いことを意味します。

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

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

1つ指摘する価値があります...サイトに安全なページと安全でないページが混在している場合は、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>

PDATE 9/8/201 - 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>
153
Dscoduc

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

ただし、使用しているjQueryファイルはあまり頻繁には変更されない可能性が高いため、ブラウザのキャッシュが起動して、その点がほとんど問題になりません。

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

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

19
Franci Penov

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

14
Mark Hurd

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>
<script>
14
Philip Tinney

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

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

8
slacy

ここにいくつかの問題があります。まず、指定した非同期ロード方法。

<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のスタイル設定が見えるようになることです。ユーザーに変更します。

他の方法は次のとおりです。

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

のような簡単な例を試してみてください。簡単なテーブルを用意し、静的jquery.min.jsロードを伴うsetOnLoadCallback（）メソッドと$（document）.ready（）メソッドを使用してセルの背景を黄色に変更します。 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="...">タグとgoogle.load()タグを持つjqueryプラグインを試してインクルードすると、まだロードされていないため、プラグインはおそらく「jQueryは定義されていません」というメッセージで失敗します。私は本当にこれを回避する方法を見ません。

（どちらの方法でも）3番目の問題は、それらが1つの外部負荷であるということです。あなたがいくつかのプラグインとあなた自身のJavascriptコードを持っていると仮定すると、あなたはあなたのJavascriptをロードするための最低2つの外部要求に任されています。あなたはおそらくjquery、すべての関連するプラグイン、そしてあなた自身のコードを入手して1つの縮小ファイルに入れるほうが得策です。

From あなたはホスティングにGoogleのAjax Libraries APIを使うべきですか？ ：

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

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

したがって、最終的には、jQueryにGoogle AJAX AP​​Iを使用していることを実際には実感できません（ここでは例を投稿することを除いて）。

6
cletus

長所：Google上のホストには利点があります

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

短所：

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

私はあなたがグーグルから含めることができ、そしていくつかのグローバル変数の存在をチェックすることができるかどうか、そして不在があなたのサーバーからロードされるならば？

6
Kristen

自分のサーバーでホストするようアドバイスする人に加えて、私はブラウザがそれを他のコンテンツスレッドとは別にロードすることを可能にするためにそれを別々のドメイン（例えばstatic.website.com）に保持することを提案したいと思います。このヒントはすべての静的なもの、画像やCSSなどにも有効です。

4
Sergii

グーグルでホスティングされている図書館には-1を投票しなければなりません。彼らは、これらのライブラリーを取り巻くラッパーを使用して、データをグーグル分析スタイルで収集しています。最低でも、クライアントのブラウザに要求している以上のことをしたくはなく、ページ上のその他のことはもっと少なくします。さらに悪いことに、これは悪くないGoogleの「新版」です - 目立たないjavascriptを使ってより多くの利用データを集めることです。

注：もし彼らがこのやり方を変えたのなら、スーパー。しかし、前回それらのホストライブラリを使用することを検討したとき、私は自分のサイト上のアウトバウンドhttpトラフィックを監視していました。

4
jro

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

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

私は自分自身がファイルへのこの特定の「ルート」を使用していて、またIPV4だけを使用しているので、私は問題につまずきました。私はjqueryがロードされていないことを伝える開発者ツールで問題を発見し、それから本当の問題を見つけるためにtracerouteなどを始めました。

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

3
basedrop

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

3
Matt Howell

ここでいくつかの有用なリソース、希望があなたの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のためにすべてのクッキーを送るべきではありません。 http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_11

ここでは、すべての技術にわたってWeb上で使用されている最も人気のある技術についてのいくつかの統計があります。 http://trends.builtwith.com/

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

2
GibboK

私はちょうどjQueryのサイトから最新バージョンを含める： http://code.jquery.com/jquery-latest.pack.js それは私のニーズに合っています私は更新について心配する必要はありません。

編集：主要なWebアプリの場合は、必ずそれを制御します。それをダウンロードして自分で提供してください。しかし、私の個人用サイトでは、それほど気にすることはできませんでした。物事は魔法のように消えることはありません、彼らは通常最初に非推奨です。将来のリリースのために何を変更すればよいのかを知るのに十分なことがわかっています。

2
geowa4

頭の中で：

  (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>
1
Frank

私は自分のサーバー上で他のjsファイルと一緒にそれをホストしています。そしてそれが（Django-compresserで、ここでは重要ではありませんが）それらを結合して縮小し、すべてのサイトで1つのjsファイルとして扱われます。それを入れる必要があります。とにかくあなた自身のjsファイルを提供する必要があるでしょう、それで私もそこに余分なjqueryバイトを追加しない理由がありません - 作られるべきより多くのkbsが転送するためにはるかに安いです。あなたは誰にも依存していません、そしてあなたの縮小されたjsがキャッシュされるとすぐに、あなたは同様に超高速です。

自分のサーバーから追加のjqueryキロバイトをロードする必要があるため（ただし、追加の要求なしで）、初回ロード時にCDNベースのソリューションが成功する可能性があります。その違いが顕著であるとは思わない。そして、クリアされたキャッシュを使った最初のロードでは、CDN jqueryを取得するために必要なリクエスト（およびDNSルックアップ）が増えるため、ホストされているソリューションはおそらく常にずっと高速になります。

私はこの点についてほとんど言及されていないこと、そしてCDNがどのようにして世界中を引き継ぐように思われるか:)

0
benzkji