jQueryをローカルでホストすることの利点と落とし穴[クローズ]


85

現在、Google CDNからjQueryおよびjQueryUI(およびjQueryUI CSS)ライブラリを取得しています。呼び出すことができgoogle.load("jquery", "1");
、最新のjQuery 1.xxが使用されるため、これが好きです。

今、私はセキュリティのためにライブラリをローカルにプルすることになっています。

私はそれらをローカルに引っ張って喜んでいますが、他に注意すべき利点と落とし穴のいくつかは何ですか?


5
私たちが話しているセキュリティの問題は何ですか?
Ascherer 2010

私は尋ねませんでした。私はそれがそんなにセキュリティではありません推測するが、ファイアウォールのGmailなどにより制御帯域幅にしようとしている
orolo

回答:


109

CDNにそれらを置くことの主な利点は、ファイルを自分のWebサイトからダウンロードしたファイルと並行してダウンロードできることです。これにより、すべてのページの待ち時間が短縮されます。したがって、これの裏側は、ローカルでホスティングすることの落とし穴です-待ち時間の増加。その主な理由は、ブラウザが同じWebドメインに同時に確立できる接続の数に制限があるためです。IE6では、これはデフォルトで同じドメインへの2つの同時接続に設定されていました-IEの開いているすべてのウィンドウ間で共有されます!! IE8 +では、デフォルトで6に改善され、FF / Chromeとインラインになっていますが、それでも、画像が多く、スプライトを使用していない場合は、待ち時間が長くなります。

CDNを使用して、私は常に最新のものを取得するのではなく、ライブラリのバージョンを明示的に設定していました。これにより、新しいバージョンでコードが破損するリスクが軽減されます。jQueryではあまりありそうにありませんが、可能です。

CDNを使用するもう1つの主な利点は、サイトのトラフィック減少することです。GBごとに支払う場合、またはリソースが限られている仮想サーバーを使用している場合は、コンテンツの一部をパブリックCDNにファームオフすると、サイト全体のパフォーマンスが向上し、ホスティングコストが下がることがあります。

@Xaverによるこの質問に対する他の回答も必ず読んでください。これはとても良いトリックです


5
ライブラリバージョンを明示的に設定するもう1つの利点は、Googleがキャッシュ時間を長くすることです。たとえば、1.9.1を指定すると、1.9を要求するよりもキャッシュの有効期間が長くなります(新しいjQuery 1.9バージョンがリリースされる可能性がありますが、1.9.1は常に同じ)。
バリー

ええと-revaxarts?そのような答えは見当たらず、現在も削除もされていません。「とても良いトリック」とは何ですか?
ashleedawg

144

私はいつもGoogleのCDN(コンテンツ配信ネットワーク)を使用しています。ただし、オフラインの場合に備えて:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.2.min.js"><\/script>')</script>

Google CDNのjQueryを取得し、必要に応じてローカルにフォールバックします

編集:IE6をサポートする必要がなく、サイトでhttpsが部分的に使用されている場合は、httpも削除できます。

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

4
コミュニティへのクレジット:stackoverflow.com/questions/1014203/...
oucil

24
XVIDEOSは現在このソリューションを使用しています:P
槙島

私はここで何かが欠けているに違いありません...このアプローチは、次の行(!window.jQuery...)が解釈される前に、CDNがロードされたjQueryがロードされて解釈されることを前提としていませんか?<script>タグは非同期で処理されますよね?
rinogo 2017

2
<script>タグは同期的に処理されます!2行目では、jQueryがすでにロードされている必要がありますが、そうでない場合に備えて、JSを挿入してローカルにロードします。document.writejQueryのがすでに存在する場合は実行されることはありません。
xaver 2017

24

他の人はその利点をカバーしています。落とし穴:

  • 自分のサーバーのコンテンツのみを含める場合、サイトを機能させるには、サーバーを実行する必要があり、ファイアウォールなどによってブロックされないようにする必要があります。サードパーティからスクリプトをプルすると、サイトを機能させるために実行してブロックを解除する必要がある2つのサーバーになります。

  • プルするサイトはすべて、サイトで<script>のユーザーエクスペリエンスを完全に制御できます。Googleが悪意を持っている場合は、jQueryのコピーに何かを入れてキー押下を記録したり、アクセスしているページから個人情報を盗んでWebトラッキングデータベースに関連付けたり、「I loveGoogle!」を投稿したりできます。すべてのフォームへのコメントなど。

グーグルはおそらく実際にそれをするつもりはないが、それはあなたのコントロールの及ばない要因であり、確かに他のスクリプトホスティングサービスで心配する何かである。以前に、統計スクリプトがマルウェアローダーによって侵害されたという事件がありました。

サードパーティのスクリプトを含める前に、サイトの1つのページであっても、そのホスト名に表示されるすべてのユーザーアクセス可能な機能(Webに面した管理機能を含む)で100%信頼する必要があります。


21
グーグルはそれをしません...私はグーグルが大好きです...彼らはそうしますか?:-p
JasCav

1
セキュリティ問題に関する優れた点。
Naltroc 2016


1
良い点:リモートCDNスクリプトがハッキングされて、自分のサイトにプルダウンされる方法について考えたことはありません。jQuery、jQueryUI、Boostrapなどの主要なライブラリではおそらく一般的ではありませんが、前述のように、特に最新の状態に保たれていない場合、サポートが不十分で小さいライブラリが犠牲になる可能性があります。良い点1
twknab

14

Google CDN:

  • キャッシング、パフォーマンスに優れ、すでに持っている可能性が高いユーザーが増え、並行してダウンロードされます
  • ヒーバー禁止のcdnがダウンした場合。あなたはめちゃくちゃです。
  • 新しいバージョンが既存のプラグインまたはサイトを壊した場合、おそらく手遅れであることがわかります

ローカル:

  • ネットに接続せずに開発が可能
  • 縮小化に加えて、gzipすることでパフォーマンス上の利点を得ることができます

5
ただし、googleのcdnからのjqueryuロードは縮小されます。cdnを使用するもう1つの
利点

if a new version breaks your existing plugins or site, you'll know about it possibly too lateこれを回避するために、CDNリンクでバージョンを指定できます。
アダム

13

私はローカルバージョンを使用することを好みます。なぜなら、それらが何を提供するかを制御できないからです。たとえば、これは私の国の法的な問題であるため、ユーザーがgoogle-analyticsなどの影響を受けないようにします。


9

利点:(特にGoogleのCDNの場合)

  1. ファイルと並行してダウンロードします。他の回答はこれにさらに対処します
  2. Googleのサーバーは、コンテンツをより速く物理的に配信できる可能性があります
  3. CDNのHTTPキャッシュはすべてのサイトでユニバーサルであるため、共通のライブラリとフレームワークはすでにユーザーのマシン上にある可能性があります
  4. あなたの帯域幅は大きなライブラリファイルを提供するために行く必要はありません

2

事実上すべての見方で、GoogleのCDNを使用することは良いことです。

パフォーマンスが向上し(サイトが本当にビジーでない限り、かなりわずかですが)、サーバーが送信する必要のあるデータの量が減少します(ただし、jQueryはダウンロードするのにそれほど大規模なものではありません)。

あなたがそれを使いたくない唯一の理由はあなたがグーグルを信頼しないならばです。これを使用することで、他の方法では公開したくないURL(サイトの安全な領域など)の知識など、サイトのトラフィックプロファイルに追加の情報ウィンドウをGoogleに効果的に提供できます。

あなたがセキュリティについて妄想しているなら、これはあなたにそれらを使わないように説得するのに十分かもしれません(結局のところ、それを自分でホストすることはあなたのサイトを這うように遅くするつもりはありません)、しかし一般的にほとんどの人は実用的な見方をしますグーグルは彼らのサイトについてすでに十分に知っているので、これを追加しても大きな違いはありません。


1

最近は少数派かもしれませんが、本当に必要な場合を除いて、CDNは使いたくないと思います。それを使い始める主な要因は次のとおりです。

  • クロスジオユーザー。米国でウェブサイトをホストしているが、ヨーロッパのユーザーが目に見える数の場合、CDNは読み込み時間を改善します。
  • 大量のユーザーや大きなコンテンツがあるため、1台のメインサーバーではもう十分ではありません。ポルノビデオのウェブサイト(または必要に応じてNetflix)を思い浮かべることができます。ビデオストリームは重い負荷であり、CDNはメインサーバーの負荷がはるかに少なくなります。

しかし...要点は、これらの点は世界のWebサイトの90%には実際には当てはまらないということです。あなたは世界中に何百万人ものオンラインユーザーがいるFacebookではなく、毎秒数百GBが転送されるPornhubではないに違いありません。

あなたのウェブサイトがあなたの都市/国のユーザーをターゲットにしていて、1台のサーバーの容量があなたが持っているユーザーの数に対して十分であるなら-なぜあなたはCDNが欲しいのですか?あなたの街のユーザーにとってはより速く、メインサーバーからすべてをローカルにフェッチするのはより簡単です。


それは一般的なCDNに関するものでしたが、jQueryやその他のライブラリに関する実際の質問に近づきましょう。

あなたのウェブサイトが1年以上メンテナンスなしでアクセス可能で機能し続けることを望むなら、例えば-それをローカルに置いてください。最近のライブラリは、おそらくフォローしたくないクレイジーなテンポで更新されています。そして、古いバージョンは最終的に削除されます。さらに、ライブラリ全体が停止する可能性があります(ただし、jQueryにはおそらく適用できません)。

最近の経験から-私が維持しているWebサイトのTinyMCEを3.xx(2012年)から5.xx(2019年春)に更新しました。このWebサイトは、ロジックのこの部分のメンテナンスなしで7(7!)年間機能していました。当時は「縮小」の概念はなく、CDNは現在ほど一般的ではありませんでした。しかし、それらが一般的であったとしても、あなたは今から3-5-10年後に何が起こるかを決して知りません。通常、あなたはあなたがそれを維持しなくてもあなたのウェブサイトを存続させたいですよね?ただし、今日CDNからjQueryをプルすると、このリンクは5年以内に機能しなくなる可能性があります(おそらくそうなるでしょう)。

@Xaverが提案したように、CDNとローカルバージョンへのフォールバックを使用したソリューションは、適切な妥協案になる可能性があります。しかし...多分CDNリンクを取り除くだけですか?;)


0

私にとって、それはあなたがどれだけのコントロールを持ちたいかによります。あなたが私のようで、仕事や旅行の際にローカルホストで開発する必要がある場合。jqueryファイルをローカルにすることは、Googleやその他の場所でホストするよりも優れています。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.