なぜdrawImageはChromeやFirefoxと比べてSafariで非常に高速に動作しますか？

Question

私はちょっとしたHTMLキャンバスビジュアライザを楽しく作っていますが、それはChromeで恐ろしく実行されていることに気付きました.Firefoxではかなり悪いですが、iPhoneやiPadを含むSafariでは全く驚くほどです！

誰でも理由を説明できますか？

私はコードがかなり単純であるべきだと思いますが、基本的にはマウス（またはタッチ）の位置を描画してからdrawImageを使用してキャンバスを一時キャンバスにコピーしています。そこから表示キャンバスをクリアし、一時キャンバス（4回）をコピーしますが、drawImageを使用して回転、オフセット、透明度、スケールなどのいくつかの要素を適用します（いくつかの異なるglobalCompositeOperationsで再生します）。したがって、drawImageは合計で各ループで5回呼び出されます。

あなたはここでデモを表示することができます。http://lakenen.com/vis.html

任意の洞察力をいただければ幸いです！

PS。可能であれば、これをiPadで試してみてください。マルチタッチできちんとしています:)

Answer 1

パフォーマンスプロファイラはSafariとChromeでほぼ同じですので、これを自分で判断する必要があります。あなたのデモは、私のマシンのSafariとChromeの両方で正常に動作します。

とにかく、画像が読み込まれずに描画されたときにdrawImageがSafariよりChromeで悪化する理由はわかりませんが、それはです。それ以外の場合、WindowsではChromeの方が速いようです。

Here's a simple jsperf I made a while ago. Windows 7マシンでSafariの2倍の速さで動作するクロム19が表示されているようです。