「JavaScriptや CSS の CDN サービスについて調べてみた」 http://www.sharkpp.net/blog/2016/03/06/research-of-javascript-and-css-cdn.html 調査用スクリプト

research-of-javascript-and-css-cdn.php

<?php 
// This code licensed under The MIT license.
//  Copyright (c) 2016 sharkpp all right reserved.
// usage:
//   php research-of-javascript-and-css-cdn.php

$cmd = 'curl -kL "%s" -o /dev/null -w "%%{http_code}\t%%{time_total}" 2> /dev/null';

$list = [
  'jQuery' => [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js',
    'https://cdn.jsdelivr.net/jquery/2.2.1/jquery.min.js',
    'https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js',
    'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js',
    'https://code.jquery.com/jquery-2.2.1.min.js',
  ],
  'lodash' => [
    'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js',
    'https://cdn.jsdelivr.net/lodash/4.6.1/lodash.core.min.js'
  ],
  'Snap.svg' => [
    'https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js',
    'https://cdn.jsdelivr.net/snap.svg/0.4.1/snap.svg-min.js',
  ],
  'D3.js' => [
    'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js',
    'https://cdn.jsdelivr.net/d3js/3.5.16/d3.min.js',
  ],
  'three.js' => [
    'https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js',
    'https://cdn.jsdelivr.net/threejs/0.0.0-r74/three.min.js',
    'https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js',
  ],
  'jQuery UI' => [
    'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js',
    'https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js',
    'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js',
    'http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.min.js',
    'https://code.jquery.com/ui/1.11.4/jquery-ui.min.js',
  ],
  'jQuery UI css' => [
    'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css',
    'https://cdn.jsdelivr.net/jquery.ui/1.11.4/themes/smoothness/jquery-ui.min.css',
    'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css',
    'http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/themes/blitzer/jquery-ui.css',
    'https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css',
  ],
  'jQuery Mobile' => [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js',
    'https://cdn.jsdelivr.net/jquery.mobile/1.4.5/jquery.mobile.min.js',
    'https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js',
    'http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.js',
    'https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js',
  ],
  'jQuery Mobile css' => [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css',
    'https://cdn.jsdelivr.net/jquery.mobile/1.4.5/jquery.mobile.min.css',
    'https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css',
    'http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.css',
    'https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css',
  ],
  'Bootstrap' => [
    'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css',
    'https://cdn.jsdelivr.net/bootstrap/3.3.6/js/bootstrap.min.js',
    'http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css',
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
  ],
  'Bootstrap js' => [
    'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js',
    'https://cdn.jsdelivr.net/bootstrap/3.3.6/js/bootstrap.min.js',
    'http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js',
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js',
  ],
  'Font Awesome' => [
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css',
    'https://cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css',
    'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css',
  ],
  'AngularJS' => [
    'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js',
    'https://cdn.jsdelivr.net/angularjs/1.5.0/angular.min.js',
    'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js',
  ],
];

$providers = [
  '!^.+?://cdnjs\.cloudflare\.com/.+?/.+?/.+?/(.+?)/.+$!'     => 'cdnjs                  ',
  '!^.+?://cdn\.jsdelivr\.net/.+?/(.+?)/.+$!'                 => 'jsDelivr               ',
  '!^.+?://ajax\.googleapis\.com/.+?/.+?/.+?/(.+?)/.+$!'      => 'Google Hosted Libraries',
  '!^.+?://ajax\.aspnetcdn\.com/.+?/.+?/.+?-([r0-9.]+)\..+$!' => 'Microsoft Ajax CDN     ',
  '!^.+?://ajax\.aspnetcdn\.com/.+?/([r0-9.]+)/.+$!'          => 'Microsoft Ajax CDN     ',
  '!.+?://code\.jquery\.com/.+?-([r0-9.]+)\..+$!'             => 'jQuery CDN             ',
  '!.+?://code\.jquery\.com/.+?/([r0-9.]+)/.+$!'              => 'jQuery CDN             ',
  '!.+?://maxcdn\.bootstrapcdn\.com/.+?/(.+?)/.+?/.+?$!'      => 'BootstrapCDN           ',
];

define('TRY_NUM', 50); // 計測回数 50 回で 15分程度目安

foreach ($list as $cat => $urls) {
  // ヘッダ出力
  echo sprintf('### %s'.PHP_EOL, $cat);
  echo PHP_EOL;
  echo sprintf('|CDN|Ver|min|ave.|max|loss|'.PHP_EOL);
  echo sprintf('|:-|-:|-:|-:|-:|-:|'.PHP_EOL);
  $tmp = [];
  foreach ($urls as $url) {
    $info = [
      'provider' => '',
      'version' => '',
      'response' => [],
      'loss' => 0
    ];
    foreach ($providers as $pattern => $provider) {
      if (preg_match($pattern, $url, $m)) {
        $info['provider'] = $provider;
        $info['version']  = $m[1];
        break;
      }
    }
    // 計測
    for ($i = 0; $i < TRY_NUM; $i++) {
      ob_start();
      passthru(sprintf($cmd, $url));
      $r = preg_split('/\s+/',ob_get_contents());
      ob_end_clean();
      $info['loss']      += 200 == intval($r[0] / 100) * 100 ? 0 : 1;
      $info['response'][] = $r[1];
    }
    $tmp[] = $info;
  }
  // 平均値でソート
  uasort($tmp, function ($a, $b) {
    if ($a['loss'] == $b['loss']) {
      return array_sum($b['response']) < array_sum($a['response']);
    }
    return array_sum($b['loss']) < array_sum($a['loss']);
  });
  // 結果を出力
  foreach ($tmp as $info)
  {
    echo sprintf('|%s|%s|%4.0f ms|%4.0f ms|%4.0f ms|%5.1f %%|'.PHP_EOL
          , $info['provider']
          , $info['version']
          , min($info['response']) * 1000.0
          , floatval(array_sum($info['response'])) * 1000.0 / TRY_NUM
          , max($info['response']) * 1000.0
          , floatval($info['loss']) * 100.0 / TRY_NUM
        );
  }
  echo PHP_EOL;
}