モバイル Web アプリケーションで重大なパフォーマンスの問題が発生したため、解決策を提供し、特にモバイル デバイスで KineticJS のパフォーマンスを維持するためのヒントとコツを求めたいと思いました...
私の場合、デスクトップ ブラウザーではすべて問題ないように見えましたが、アプリケーションがモバイル デバイスとそのブラウザーをクラッシュさせました。しばらくして、ブラウザの高さと幅 (より良いのは、ビューポート) が元のデバイスの解像度よりもはるかに高くなっていることがわかりました。この問題を修正するには、次の行を my に追加するだけですindex.html。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
ですから、パフォーマンスを維持する他の方法を見つけた方や、KineticJS を使用する際に避けるべき特別なパフォーマンス キラーがあれば教えていただければ幸いです。
私も KineticJS を使い始めたばかりですが、仕事でキャンバス Web アプリを構築しているため、頻繁に使用しています。パフォーマンスに影響を与えることがわかったことは次のとおりです。
レイヤーに描画する図形が多いほど、すべてが遅くなります。
適用するトゥイーン/アニメーションが多いほど、すべてが遅くなります。
これらのことは非常に明白なので、これに対抗するために私たちが行ったことをもう少し詳しく説明します.
10,000 個の図形を描画する場合、1 つのレイヤーに描画するのは、10 個のレイヤーを描画してレイヤーごとに 1,000 個の図形を追加するよりも遅くなります。しかし、20 個のレイヤーを描画し、レイヤーごとに 500 個の図形を追加すると、前回よりも遅くなります。
どういうわけか、さまざまなアプローチを試して、どれが影響が少ないかを確認する必要があります.
もう1つ。不要なオブジェクトの操作は避けてください。たとえば、10 個のグループがあり、それぞれに 100 個の図形があるとします。一度に 1 つのグループのみが表示され、グループにトゥイーンを適用します。怠惰ですべてのグループにトゥイーンを適用する代わりに、いくつかの作業を行い、その 1 つの可視グループにトゥイーンを適用するだけです。
形状のキャッシュも推奨されます。
これらのこと以外には、他にアイデアはありません。私は現在、これらすべてに対処しています。それは私にとってかなり新しいものです。しかし、誰もコメントしていないことがわかったので、2セントをプールに入れたいと思いました。