パーティクル3万個
IE 10pp2 と iPad2 (iOS5) のスコアを追記しました
iPhone4S (iOS5) のスコアを追記しました
Firefox 4 から window.mozRequestAnimationFrame が利用可能になっています。
window.requestAnimationFrame / setTimeout(,4) / setInterval(, 16) で パーティクル3万個を飛ばすデモ。
ベンチマークマシンのスペック → MacBook (13-inch, Late 2009) - 技術仕様。
メモリ4GBに + BootCamp + Windows7 上で計測しています。
Windows エクスペリエンスインデックスの数値は、5.1 で、各項目は
- プロセッサ: 5.8
- メモリ: 5.8
- グラフィックス: 5.1
- ゲーム用グラフィックス: 5.5
- プライマリハードディスク: 5.9
となっています。
各ブラウザのスコアはこちら
requestAnimationFrame または setInterval(16)
| Browser | fps | method |
|---|---|---|
| IE 9.0.1 (x86) | 45 | setInterval(, 16) |
| IE 9.0.1 (x64) | 17 | setInterval(, 16) |
| IE 10 pp1 | 45 | setInterval(, 16) |
| IE 10 pp2 | 44 | msRequestAnimationFrame |
| IE 10 pp2 | 44 | setInterval(, 16) |
| Safari 5.1 beta | 50 | setInterval(, 16) |
| Firefox 5 | 60 | mozRequestAnimationFrame |
| Chrome 14 | 60 | webkitRequestAnimationFrame |
| Opera 11.11 | 62.5 | setInterval(, 16) |
| iPhone 3GS (iOS4.3.3) | 5.2 | setInterval(, 16) |
| iPhone 4GS (iOS5) | 14.1 | setInterval(, 16) |
| iPad 2 (iOS4.3.3) | 12.9 | setInterval(, 16) |
| iPad 2 (iOS5.0) | 17.6 | setInterval(, 16) |
| Firefox 5 (DHD) | 20.5 | mozRequestAnimationFrame |
| MobileWebKit 533.1 (DHD) | 3.9 | setInterval(, 16) |
| MobileWebKit 533.1 (GP) | 5.2 | setInterval(, 16) |
setTimeout(4) で実行
| Browser | fps | requestAnimationFrame または setInterval(16)と比較して | |
|---|---|---|---|
| IE 9.0.1 (x86) | 41 | やや遅くなる | |
| IE 9.0.1 (x64) | 16.5 | やや遅くなる | |
| IE 10 pp1 | 42.5 | やや遅くなる | |
| Safari 5.1 beta | 43 | やや遅くなる | |
| Firefox 5 | 100 | とても速くなる(速くなりすぎる?) | |
| Chrome 14 | 60 | 変化なし | |
| Opera 11.11 | 95 | とても速くなる(速くなりすぎる?) | |
| iPhone 3GS (iOS4.3.3) | 5.1 | 変化なし | |
| iPhone 4GS (iOS5.0) | 13.5 | やや遅くなる | |
| iPad 2 (iOS4.3.3) | 12.9 | 変化なし | |
| iPad 2 (iOS5.0) | 16.4 | やや遅くなる | |
| Firefox 5 - (DHD) | 20.2 | やや遅くなる | |
| MobileWebKit 533.1 - (DHD) | 5.2 | やや速くなる | |
| MobileWebKit 533.1 - (GP) | 5.2 | 変化なし |
※DHD = HTC Desire HD (Android OS 2.2)
※GP = GALAPAGOS SoftBank 005SH (Android OS 2.2.1)
このテストでわかったことは、
・MobileWebKit 533.1 で動かすとパーティクルが緑色で表示される(バグかな?)
・setTimeout(4)はsetInterval(16)に比べ負荷が高くなる傾向がある
・Firefox 5 と Opera 11 は setTimeout(4) に追従している。未来を感じる
・iOS 5.0 の MobileSafari は window.webkitRequestAnimationFrame() 未実装
