1

残念ながら、私が取り組んでいる製品は本質的に難解なクライアントに依存するものでいっぱいであるため、問題のシナリオを再現可能な例に意味のある形で還元することはできません.コード：

http://jsbin.com/barney/1/edit

(jQuery、Underscore、Mustache、いくつかのプラグイン、そしてもちろん Google Maps v3 JS API を利用します)

Google Maps JS API を使用して、比較的単純な Web アプリを作成しています。これまでのところ、カスタム コンテンツを作成し、InfoWindowユーザーがカスタム コンテンツをクリックしたときにコンテンツを動的に変更するだけMarkerImageです。マップは、スタイラーを使用して彩度を下げています。

これらのカスタム マーカーの 1 つをクリックすると、断続的に (確実に再現することはできません) プロセスが完全にフリーズします。コードの最初の行にすぐにブレークポイントがありますevent.addListener– 私のコードが通常のモノのスタックで最初にヒットしたとき – しかし、プロセスは決してそこに到達しません: 私がそこに到達するまでにすべてが凍結されています.

通常はマーカーを 4 回クリックするだけでうまくいきますが、それ以外の場合は、アプリケーションが大騒ぎせずに UX 全体を実行します。

私の頭の上からの追加情報：

  • 本文に委譲された jQuery クリック イベントがいくつかあります (これらが監視可能なスタックで発生しているわけではありません)。
  • 5 分ほど放っておくと、このアプリはとにかくフリーズするので、無意識のうちに無意識のうちに Maps API を悪用しているのではないかと思います。

この種のシナリオの落とし穴に関するアドバイスをいただければ幸いです。

4

1 に答える 1

1

上記の問題はすべて、Google マップの DOM 構造の祖先要素から CSS3 トランジションを削除することで解決されました。これは、translate3d(0)GPU アクセラレーション アニメーションを強制するためのハックとして利用されます。奇妙ですが本当です。Webkit の明らかに無関係なパフォーマンスの問題からの逸話的な証拠の一部は、s を 'd に適用すると、あらゆる種類 のtransitionキャッチさtranslate3dれないメモリ リークの問題があることを明らかにしています。おかしなことに、トランジションに translate3d を適用することは、CPU パフォーマンスの浪費を軽減する方法であるという一般通念があることを考えると!

于 2012-09-28T10:11:57.817 に答える