4

私はRaphaelJSを使用してIE8のいくつかのパフォーマンスの問題をデバッグしています。ラファエルの最大1000個の要素とテキストノードからグラフを作成しています。特に、1つのグラフがレンダリング時に問題を引き起こしています。IE9では、レンダリングするマシンに応じて2〜7秒かかり、IE8では1分以上かかります。

あなたはここで問題のウェブサイトを見ることができます。3番目のグラフです（クリックしてください）。

基本的に、データの各ポイントの要素を作成し、それらをラファエルキャンバスに描画します。

私はIEDeveloperToolsプロファイラーを使用し、それが両方から呼び出された関数setFillAndStroke()であり、要素の塗りつぶし、ストローク、スタイル、およびその他のいくつかの設定を変更したときに呼び出されることを確認しました。関数はの犯人です。attr()text()getBoundingRect()setFillAndStroke()

これがプロファイラー出力のスクリーンショットです

私の研究では、IE8で問題を抱えている人々に出くわしましattr()たtext()。

だからいくつかの質問：

  1. Raphael要素に「デフォルト」の塗りと線を設定して、その塗りと線で作成できるようにすることはできますか？これにより、への呼び出しが削除されgetClientBoundingRect()ます。ドキュメントでそのような関数を探してみましたが、うまくいきませんでした。
  2. これは、グラフのルックアンドフィールを変更せずに解決できるものですか？
  3. これがコードだけでできることである場合、RaphaelJSを変更せずにそれを行うことは可能ですか？
  4. 他のアイデアはありますか？

誰かが古いバージョンのRaphaelで同様の問題を抱えているようで、明らかに2.0.0で修正されましたが、バージョン2.0.2を使用しています（2.1.0でも同じ問題があることがテストされています）。

これがgithubの問題レポートです。

4

1 に答える 1

1

したがって、Eliran Malkaのアドバイスのおかげで、attr()クラスの使用からクラスの追加、CSSの使用に変更することを進めていましたが、バグがあり、8つではなく合計178のラベルが描画されることがわかりました（22〜間隔ごとに1つ）。しかし、それらの主な8つは「紙」の寸法の外側にあります。

getBoundingRect()要素が画面外にあるときに窒息しているのではないかと疑われたので、バグの原因を見つけて修正し、予想される8つだけを描画し、それらすべてをキャンバスに描画しました。これにより、ロード時間が1分プラスから8.8秒に短縮されました。

したがって、劇的な速度低下の原因は、text()画面外に要素を作成するために使用し、次にを介してそれらの属性を変更することattr()でした。

8.8秒はまだ素晴らしいものではありませんが、1分と少し（正確には72〜秒）よりも1桁優れているので、残りの問題を解決する間、これを「回答済み」と呼びます。

于 2012-03-28T04:49:42.417 に答える