hiroomiのブックマーク - はてなブックマーク

hiroomi id:hiroomi

ブックマーク / clockmaker.jp (2)

HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
hiroomi 2012/02/20
リンク
HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。デモの作り方冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、Bit mapDataを配列に格納することで2〜3倍の高速化」から移植したものです。さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。フォースマップの作成パーティクル情報を付与した表示クラスの作成フォースマップ
hiroomi 2012/02/06
HTML5
リンク
1