ライブラリ無しで

javaScriptで描画表現を行うとき、昨今はcreatejsに頼りっきりである。
Flashのような表示リスト、階層構造はとても使いやすい。
ただこれだけの機能、どの程度負荷がかかっているのであろうか?以前から気になっていたので簡単なサンプルで試してみた。

サンプルには、本ウェブサイトのaboutusページに使っているパーティクルの移動モーションを使う。

particle
1.createjs:Shapeを継承したParticleクラスを作成。Shapeの描画機能及びStage表示はcreatejsに頼る

http://nouv.biz/labo/20141209_createjs/nodeGarden_with_cs.html

2.ライブラリ無し:オリジナルクラスParticleクラスを作成。Particleクラスにcanvasを渡し、それぞれ描画
http://nouv.biz/labo/20141209_createjs/nodeGarden_2.html

結果(当然だけれど)圧倒的にcreatejsは重かった。
それはそうだ。今回のパーティクル(ただの円)であればcreatejsのShapeの豊富な機能は必要ないし、階層も考慮する必要は殆ど無い。いちいちcanvasを意識するのが面倒だけれど。

結局、ちょっとした演出程度に用いるのであれば「ライブラリを使わない」という選択肢もある、という結論でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。 またURLは投稿できません。(スパム対策)