サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJS 0.8.0: EaselJSの最適化が進められた

ID: FN1412003 Technique: HTML5 and JavaScript Library: EaselJS 0.8.0

EaselJS 0.8では、パフォーマンスを最適化するため、テスト用のフレームワークを採入れました[*1]。その結果をもとに、大きく3つの変更が加えられました(CreateJS Blog「Performance in EaselJS」参照)。

  • クラスの再構築
    プロパティは、コンストラクタのFunction.prototypeプロパティでなく、インスタンスに定めることとしました。こうすることで、プロパティやメソッドの扱いが速まります。ただし、インスタンスをつくるのは少し遅くなります。さらに詳しくは、「CreateJSの新しいクラスモデル」をお読みください。
  • Graphicsクラスの書直し
    Graphicsクラスは、Graphicsコマンドを定め、数の多い処理の扱いを修正しました。その結果、大幅な改善ができました。とくに、Graphicsオブジェクトにたくさんの描画指示を与えた場合に著しいといえます。新たなGraphicsクラスとGraphicsコマンドについては、「EaselJS NEXT: Graphicsクラス」をご覧ください。
  • Ticker.tickイベントの配信
    Ticker.tickイベントを表示リストに送るモデルが最適化されました。また、イベントオブジェクトのインスタンスは、毎回つくることなく使い回します。Ticker.tickイベントは定められた短い間隔で、たくさんのオブジェクトに送られることが考えられるので、ステージの更新は大幅に速められます。

これらにより、ほとんどのオブジェクトはプロパティを2倍の速さで参照できます。Stage.update()メソッドにかかる時間も、ブラウザの描画時間を除いて、2倍速くなりました。ベクターグラフィックスも高速に描かれ、フィルタは2〜5倍の速さで適用できます。

[*1] フレームワークは、まずバージョンの異なるライブラリ間で結果を比べています(EaselJS「PerformanceTests」)。つぎに、コードとブラウザの描画を分けた結果が調べられました(EaselJS「FauxCanvas」)。フレームワークはまだできたばかりなので、これから充実させていくことになります。



作成者: 野中文雄
作成日: 2014年12月16日


Copyright © 2001-2014 Fumio Nonaka.  All rights reserved.