242

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 の切り替えを気にする必要がなくなります。

4

16 に答える 16

153

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

1 つ目: Google の API サーバーは、私の単一のサーバーの場所ではなく、世界中に分散しています。通常、サーバーが近いほど、訪問者への応答時間が速くなります。

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

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

私は、Google が正しいスクリプト ファイルを提供し、オンラインでアクセス可能であることをある程度信頼していることを理解しています。これまでのところ、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>

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>
于 2009-02-13T20:12:30.553 に答える
19

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

ただし、使用している jQuery ファイルがあまり頻繁に変更されない可能性が高いことを考えると、ブラウザーのキャッシュが作動し、ほとんどの場合、その点は意味がありません。

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

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

于 2009-02-13T19:58:21.803 に答える
14

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>
于 2009-02-13T19:57:46.393 に答える
14

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

于 2009-02-13T19:47:42.437 に答える
6

長所：Googleのホストにはメリットがあります

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

短所：

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

GoogleからINCLUDEを実行してから、グローバル変数などの存在を確認できますか。また、サーバーからの負荷がないかどうかを確認してください。

于 2009-02-13T20:36:23.210 に答える
6

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

<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>

シンプルなテーブルを用意し、 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 はプラグインに大きく依存するため、これは jquery の問題です。<script src="...">タグ付きの jquery プラグインをインクルードしようとするとgoogle.load()、プラグインがまだロードされていないため、「jQuery が定義されていません」というメッセージが表示されて失敗する可能性があります。これを回避する方法が本当にわかりません。

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

ホスティングに Google の Ajax Libraries API を使用する必要がありますか? :

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

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

したがって、ここに例を投稿することを除いて、少なくともjQuery用のGoogle AJAX APIを使用しているのを実際に見ることはできません(より「完全な」APIは、いくつかの点で別の話です)。

于 2009-02-13T22:10:39.193 に答える
4

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

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

于 2009-02-13T20:30:48.420 に答える
4

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

于 2009-02-13T20:22:44.960 に答える
3

私はこれについて古臭いかもしれませんが、ホットリンクにはまだ眉をひそめています。Google は例外かもしれませんが、一般的には、自分のサーバーでファイルをホストするのがマナーです。

于 2009-02-13T19:47:58.397 に答える
2

ここにいくつかの有用なリソースがあります。希望はあなたがあなたの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/

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

于 2011-03-29T11:54:56.313 に答える
2

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

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

于 2009-02-13T19:47:45.370 に答える
1

頭の中：

  (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>
于 2010-02-16T12:28:39.243 に答える
1

私が「ライブ」サイトの責任者である場合、自分のサイトで行われていることすべてに注意を払う必要があります。そのため、私は同じサーバーまたは静的/外部サーバーのいずれかでjquery-minバージョンを自分でホストしますが、いずれにしても、すべての変更を検証/テストした後、私（または私のプログラム/プロキシ）だけがライブラリを更新できる場所です

于 2009-02-13T21:50:59.460 に答える