+new Date を Date.now() に差し替えると200〜400% 高速化も

CSS を利用したアニメーションでは、必ず現在時刻を取得するコードが入ります。

var now = +new Date;

ECMAScript-262 5th では Date.now() が新しく追加されました。
Date.now() は +new Date と同じ機能(現在時刻を数値で返す)を持ちながら、new の必要がないため速そうです。

ベンチ

<!doctype html><html><head><title></title>
</head><body>
<script>
window.onload = function() {
  Date.now || (Date.now = function() { // Date.now が実装されていないブラウザ用の実装
    return +new Date;
  });
  job1();
  job2();
}
function job1() {
  var now = +new Date;
  for(var i = 0; i < 100000; ++i) {
    +new Date;
  }
  document.getElementById("view").innerHTML += ((+new Date) - now) + "<br />";
}
function job2() {
  var now = +new Date;
  for(var i = 0; i < 100000; ++i) {
    Date.now();
  }
  document.getElementById("view").innerHTML += ((+new Date) - now);
}
</script>
<div id="view"></div>
</body></html>

ベンチ結果

Ch3(*) Ch4 Fx3 Fx3.5 Fx3.6
+new Date 179 52 1109 704 518
Date.now(native) 56 29 566 237 326
Date.now(js)
320% 180% 200% 300% 160%
Op10.10 Op10.50 Sa3(*) Sa4 iSa4 IE6(*) IE8
+new Date 328 427 725 157 870 1531 594
Date.now(native) 109 77 472
Date.now(js) 359 845 2032 703
91% 400% 86% 200% 180% 75% 85%

# (*) は ASPIRE ONE で測定, その他は VOSTRO 1000 で測定

まとめ

  • 予想通り。かなり速くなる
    • +new Date を多用している場合は Date.now() に差し替えると、より滑らかなアニメーションになると思うよ。
  • uupaa.js のサクサク」http://handsout.jp/slide/1894 に追記しました。

捕捉

  • IEなどで遅くなるのを回避したい方は以下のようにすると良いでしょう
    • ループ中の三項演算子のコストはほぼゼロです(実際に計った)。Date.now のメリットをおいしくいただけます。
var nowimpl = !!Date.now;
for (...) {
  nowimpl ? Date.now() : +new Date;
}