+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 に追記しました。