HTMLキャンバスのパフォーマンス - インポート画像や描画キャンバスには、この複雑/単純さの画像の場合

Question

、PNG画像を作成し、キャンバスにインポートまたはパスを描画し、キャンバス上埋めるために良いですか？

http://www.freeiconsdownload.com/site-images/Large/developer_icons_452x336.jpg

Answer 1

は、一般的には、構築し、パスを描画するよりもPNG /メモリ内のキャンバスから描画するために、ほとんど常により良いです。（脚注を参照）Here's some simple data.ここでは10の要素について話しています。簡単なもののために。

特に、これらのオブジェクトを繰り返し60回以上繰り返して描画する場合は、

特にtext is involvedの場合。

複雑なキャンバスで生成されたシェイプでは、パフォーマンスを重視しているいくつかのデザイナーは、メモリ内のキャンバス上でプリレンダリングし、そのたびにパスを再作成するのではなく、drawImageを使用してキャンバスからキャンバスに描画します。非常に多くの場合、それは価値がありますが、もちろん、プロファイリングを打つことはできません。もちろんオフに取得しない

が、あなたは（ほぼ）あなたのキャンバスアプリを終了するまで、私はちょうどあなたが、おそらくこの種のものを心配してはならないことを思い出させるしたいと思います。

「我々は小さな効率を忘れなければならない、時間の約97％を言う：時期尚早の最適化は諸悪の根源である」

-Knuth注意すべき大きなものがあることは、多くののためでありますこれらのボタンを描画する際のパフォーマンスは重要ではないかもしれません（または明らかに違いはありません）。キャンバスアプリケーションの最初の繰り返しが完了して作業を開始するまでは、どちらの方が速いか心配したくはないでしょう"polish、polish、polish"のアップデート。オンザフライでのレンダリングパスが優れている、それはほとんどにおそらく明らかだとき

---

は、いくつかは不思議に思うかもしれませんが、場合には、それは私がそれを言及を与えるではありません。描画プログラムやパスから生まれたアニメーションなどのインタラクティブなパス。次のフレームは別の静止画ではなく、パスに追加されます。これらをはじめ、各フレームでパス自体を更新したい場所は、パスを維持して何かを事前レンダリングしようとしない場所です。

Answer 2

私は、各ブラウザが異なっ行うだろうと想像し、それはおそらく、それは各タイプの1000年を言う描画にかかる時間迅速なベンチマークと時間を書くのがベストでしょう。あなたはPNG画像を持っている場合であるとして、すでに、なぜそれらを使用しないで、プログラミングの容易さの観点から、言われていること

。キャンバス