1. ホーム
  2. ジャバスクリプト

[解決済み】jQueryライブラリはどこからインクルードするのですか?Google JSAPIですか?CDNですか?

2022-04-03 02:08:49

質問

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: ここ1年、問題なく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つ目 私のウェブホスティング会社は、使用した帯域幅の料金を請求します。 同じファイルを他の場所で取得できるのであれば、ユーザーセッションあたり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>