2013年01月21日

ブラウザspeed調査

かなり前のぱずぷれv3のスクリプトで測定したデータしか無かったので、
今回ぱずぷれv3のv3.3.6リリースと共に測定し直してみました。

MacBook Pro 13" Retina
ブラウザ正答判定全盤面描画リサイズ時描画
Safari 6.0.2 0.31ms 13.62ms 27.20ms
Chrome 26 canary 0.10ms 13.67ms 25.33ms
Firefox 18.0.0 0.18ms 5.81ms 22.06ms

MacBook Pro 13" Retina (Windows 8 on Parallels)
ブラウザ正答判定全盤面描画リサイズ時描画
IE10 0.13ms 39.95ms 39.19ms
Opera 12.12 0.22ms 6.68ms 19.99ms
Firefox 18.0.0 (比較用) 0.19ms 6.38ms 25.55ms

4年前の自作PC (Core 2 Duo E8400 + Radeon5770 + Windows 7)
ブラウザ正答判定全盤面描画リサイズ時描画
IE9 0.21ms 74.48ms 48.36ms
IE10 Release Preview 0.15ms 37.45ms 41.85ms
Firefox 18.0.1 0.24ms 5.22ms 22.53ms
Opera 11.60 0.25ms 6.65ms 19.02ms
Opera 12.12 0.26ms 6.42ms 19.61ms

6年前のLet's note (Core Solo + Windows XP)
ブラウザ正答判定全盤面描画リサイズ時描画
IE6 53.00ms 332.97ms 1661.33ms
IE6 + SilverLight 52.00ms 235.97ms 592.00ms
IE8 23.61ms 429.33ms 904.83ms
IE8 + SilverLight 24.24ms 77.80ms 238.77ms
Firefox 3.6.28 2.24ms 28.48ms 161.32ms
Firefox 18.0.1 0.80ms 16.89ms 70.02ms
Chrome 24 0.42ms 34.08ms 74.63ms
Safari 5.1.7 1.25ms 20.83ms 62.07ms
Opera 9.64 10.19ms 48.64ms 145.83ms
Opera 10.62 0.86ms 21.31ms 64.08ms
Opera 12.12 0.85ms 19.95ms 61.93ms

タブレットその他
ブラウザ正答判定全盤面描画リサイズ時描画
iPad3 + Safari 5.1 2.39ms 42.43ms 122.52ms
iPhone 4 + Safari 5.1 4.40ms 107.27ms 323.23ms
Nexus 7 + Chrome 18 0.72ms 67.99ms 154.28ms
Nexus 7 + Firefox 17.0.0 1.51ms 60.59ms 207.71ms
Nexus 7 + Firefox 18.0.0 1.25ms 76.59ms 230.11ms
F-05D + Android標準ブラウザ 4.0 1.18ms 34.50ms 124.24ms
F-05D + Chrome 18 0.77ms 65.23ms 152.60ms
WiiU 3.78ms 45.71ms 130.18ms
3DS 141.65ms 2791.00ms 2592.00ms

感想文

  • IE6とIE8レベルだとかなり動作がもっさりになる
  • 数字には出てないけど、Nexus 7がタッチパネルが妙にもっさりしている気がする
  • スマホのF-05D(ARROW X LTE)はそんなにもっさりしてない感覚なので、機器の作りの影響?
  • それ以外は特に影響のない範囲になっていると思います、昔のPCでも速い方のブラウザ使ってほしいですね。
  • IE9, 10は、特にIE9はSVGをappendChildするよりしないほうが遅いのはいったいどういうことなの。。
  • 描画をSVGじゃなくてcanvasにしたら、Chrome/Safari/IE9,10速くなる、Operaまあまあ速くなる、Firefox遅くなる、という感じになります。
  • 3DSはネタ、というかエラーはしないけど動作は全く実用的ではないです。しかもtouchイベント使えなくて、タッチパネルを長押し後動かすとmousemoveもとれるようになるとか。
  • 逆にWiiUだとtouchイベントもとれるし、速度的にも普通に動きます。CPU弱めかな?という印象はありますが。
posted by はっぱ at 01:49| Comment(21) | TrackBack(0) | プログラム

touchイベントとmouseイベントが複合したときのメモ

touchイベントとmouseイベントの絡みについて調べたのでメモ。

タブレット(Nexus 7)について

タッチパネルを押した時 -> touchstartイベントが発生する
タッチパネルを押して指を動かした時 -> touchmoveイベントが発生する
タッチパネルを離した時 -> touchendイベントが発生する。event.touchesには位置情報が無いのでevet.changedTouchesで取得する

タッチパネルを押してすぐ離した時
 -> 場合によってはtouchend後に続いてmousemove, mousedown, mouse up, clickイベントがこの順に発生する
   touchstartイベント時にevent.preventDefault()していたら発生しない


マウスを繋いでボタンを押した時 -> touchstartイベントが発生する
マウスを動かした時 -> mousemoveイベントが発生する
マウスのボタンを離した時 -> touchendイベントが発生する

IE10のポインターイベントについて

MSPointerDown, MSPointerMove, MSPointerUpイベントはmouseイベントとほぼ同じ。
MicrosoftのページやW3Cの仕様にはevent.pageXとか書いていないけど、いちおうeventオブジェクトへは渡してくれる。
posted by はっぱ at 01:28| Comment(12) | TrackBack(0) | プログラム