canvasのサンプルを更新した

HTML5のcanvasを使ってみた

四角形を動かす時に、差分の時間を取得するようにした。これで、FPSに依存せずに描画できる。FPSとmiliseconds per frameと四角形の数を表示するようにしてみた。FPSは本来、パフォーマンスの比較する値として使うべきではないのだが、まあ、広く知られているのはFPSの方なので、一応、表示しておいた。

ところで、改めて試していて気がついたことがある。Safariで、描画する四角形の数が増えると、急に遅くなるのは何故だろうと思っていたが、どうもこれは、Safariが描画できていないのではなく、わざと描画していないのだと思う。canvasではなく、javascriptの問題だと思う。おそらく、あまりにも重いJavascriptは、ユーザーの入力がなければ、実行しない設計になっているのだろう。何かのキーを押し続けると、描画が始まる。ユーザー側からみれば、クソ重いJavascriptなど実行されてもしょうがないので、悪くはない機能だと言える。いかにもユーザーの心をとらえるAppleの考えそうなことだ。将来canvasでの描画が一般的になったとき、はたしてこの仕様をそのまま続けられるだろうか。Flashと同じ土俵にたつならば、この仕様はいただけない。

肝心のパフォーマンスだが、最新のブラウザで試してみた所、Chromeがブッチギリで早い。私の環境では、200個ほどのアニメーションを動かしても、16 miliseconds per frameを維持している。これは、webkitのcanvasの描画の早さと、V8のjavascriptの実行の早さが関係しているのだろう。

次いで、Safariが早い。ただし、safariで描画させるためには、絶えずキーボードの何かのキーを押し続ける必要がある。SafariのNitroは、V8と同じくネイティブコードを生成するので、Chromeと比べて倍ほど遅いのは、このユーザーの入力なしでは、重いJavascriptを実行しない機構が、足かせになっている部分もあるのではないかと思う。

Firefoxは遅い。これはjavascriptが遅いのではないかと思う。

Operaは正直にいって、使い物にならないほど遅い。静的なコンテンツを表示するならともかく、ゲームのような動的な描画には、向いていない。これは、canvasの遅さと云うよりも、javascriptが根本的に遅いためだと思われる。

FirefoxもOperaも、現在、ネイティブコードを生成するJavascriptの開発に力を注いでいる。もはやJavascriptは、単なるHTMLのオマケの域を超えて、本物のプログラムとして認識されるに至ったからだろう。

なお、上記のテストは、すべて最新のブラウザで行った。ベータ版があるブラウザは、それを使った。