JQuery CDN


JQuery CDNとは、さまざまな会社が行っている「CDNによるJQueryの無料配信」の総称です。

JQuery

JQueryとは、もっとも多く使用されているJavascriptライブラリです。

  • 参考:w3techsによるサーベイ
    • サイト使用率(JQueryを使用しているサイト数/全サイト数):65.7%
    • マーケットシェア(JQueryを使用しているサイト数/Javascriptを使用しているサイト数):95.5%

メリットとデメリット

  • メリット
    • ブラウザキャッシュの利用
      • ブラウザが対象となるjQueryライブラリを他サイトで読み込んでいた場合、そのライブラリに対するネットワークアクセスは発生しません
    • CDNの利用
      • ブラウザキャッシュにライブラリが無い場合にも、高速にネットワークから配信します
  • デメリット
    • CDNの障害対策、オフライン開発
      • ローカルファイルへのフォールバックコードを追加する必要があります

JQuery CDN サービス会社

多くの会社がCDNによりJQueryを配信しています。

  • JQuery Foundation本体  (CDNはMaxCDNが提供)
  • CDNjs (Cloudflareが提供)
  • Google CDN
  • Microsoft
  • jsDelivr (CDNは、maxcdn, cloudfare, keycdnが提供)

まず、配信URL中におけるバージョンの扱いは、以下の3パターンがあります:

  • ファイル名
    • ベースURL/jquery-2.1.4.js
  • ディレクトリ
    • ベースURL/2.1.4/jquery.js
  • ファイル名+ディレクトリ
    • ベースURL/2.1.4/jquery-2.1.4.js

そして、URLの規則は、次のように各社バラバラです:

本体

ベースURL バージョン
JQuery Foundation https://code.jquery.com/ ファイル名
cdnjs https://cdnjs.cloudflare.com/ajax/libs/jquery/ ディレクトリ
Google https://ajax.googleapis.com/ajax/libs/jquery/ ディレクトリ
Microsoft https://ajax.aspnetcdn.com/ajax/jquery/ ファイル名
jsdelivr https://cdn.jsdelivr.net/jquery/ ディレクトリ

UI

ベースURL バージョン
JQuery Foundation https://code.jquery.com/ui/ ディレクトリ
cdnjs https://cdnjs.cloudflare.com/ajax/libs/jquery-ui/ ディレクトリ
Google https://ajax.googleapis.com/ajax/libs/jqueryui/ ディレクトリ
Microsoft https://ajax.aspnetcdn.com/ajax/jquery.ui/ ディレクトリ
jsdelivr https://cdn.jsdelivr.net/jquery.ui/ ディレクトリ

Mobile

ベースURL バージョン
JQuery Foundation https://code.jquery.com/mobile/ ディレクトリ+ファイル名
cdnjs https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/ ディレクトリ
Google https://ajax.googleapis.com/ajax/libs/jquerymobile/ ディレクトリ
Microsoft https://ajax.aspnetcdn.com/ajax/jquery.mobile/ ディレクトリ
jsdelivr https://cdn.jsdelivr.net/jquery.mobile/ ディレクトリ

比較

どのCDNを使うべきかという指標については、いくつかありますが、マーケットシェアが最も効く指標になります:

  • マーケットシェア
    • ブラウザが、対象となるjQueryライブラリを過去に読み込んでいる(他サイトで読み込んでいた)場合、ネットワークアクセスは発生しません(キャッシュを利用します)。そのため、一般的なサイトがどれぐらい対象のjQurey CDNを使用しているか(マーケットシェア)が、最も重要な指標になります。
  • 速度
    • ブラウザキャッシュでミスした場合、一般CDNと同じ基準での速度比較が必要となります。ただし、各社ともに、速度面での大差は無いと思われます。