JointJSでは多くの図形を描画する場合にパフォーマンスへの影響が懸念されます。大量の図形を描画しようとした際に、コード側で対策をすることができるのかがきになるところです。
今回はいくつかの設定値をピックアップし、実際に計測を行うと設定の有無でパフォーマンスの改善の余地があるのかどうかを調査していきます。
【検証1】Graphに追加するときのSortの有無
概要
GraphのaddCell()/addCells()メソッドではオプションで{sort: false}を指定することで追加したCellの順序を整理するかどうかを指定できます。この設定がどれくらいパフォーマンスに影響するかを確認します。
検証方法
100個 / 1,000個 / 10,000個のRectangleをそれぞれ生成し、addCells()メソッドで同時に追加したときの時間を{sort: false}/{sort: true}をつけてそれぞれ計測した
検証結果
Sortを行わない方が速い
ただし1,000個未満くらいの個数であればあまり差は出ない
100個のときの結果(ms)
ソートあり 15.600000001490116
ソートなし 20.200000002980232
1000個のときの結果(ms)
ソートあり 156
ソートなし 119.90000000596046
10000個のときの結果(ms)
ソートあり 12101.60000000149
ソートなし 948.2999999970198
計測に使用したコード
【検証2】paper.freeze()の指定有無
概要
Graphの要素を変更する際にPaperをfreezeしていると要素の描画が即時反映されなくなります。
即時反映されない分、速くなるのではないかと思い検証してみました。
検証方法
100個 / 1,000個 / 10,000個のRectangleをそれぞれ生成し、addCells()メソッドで同時に追加したときの時間をpaper.freeze()している状態、paper.unfreeze()している状態でそれぞれ計測した
検証結果
変化なし。Paperのfreezeの有無はパフォーマンスには影響がなかった。
100個のときの結果(ms)
freezeあり 15.100000001490116
freezeなし 20
1000個のときの結果(ms)
freezeあり 149.5
freezeなし 161.70000000298023
10000個のときの結果(ms)
freezeあり 10767.79999999702
freezeなし 8292.5
計測に使用したコード
【検証3】markupにjoint.util.svgを使用するかどうか
概要
カスタム要素のmarkupはJSONで書く方法とutil.svgでSVGタグを書く方法と2通りあります。内部的な変換などによるパフォーマンス影響が無いかどうかを確認します。
検証方法
util.svgを使用したカスタム要素と使用しないカスタム要素(結果のSVGは同じになるもの)を 100個 / 1,000個 / 10,000個 それぞれ生成＋グラフ追加したときにかかる時間を計測した
検証結果
変化なし。util.svgを使用しているかどうかはパフォーマンスには影響が無いことがわかった。
100個のときの結果(ms)
joint.util.svg使用あり 18.899999998509884
joint.util.svg使用なし 22.19999999552965
1000個のときの結果(ms)
joint.util.svg使用あり 140.89999999850988
joint.util.svg使用なし 171.30000000447035
10000個のときの結果(ms)
joint.util.svg使用あり 6166.9000000059605
joint.util.svg使用なし 6026.69999999553
計測に使用したコード
まとめ
今回計測を行った中ではSortの有無のみがパフォーマンスに影響があることがわかりました。実行速度が遅いときにSortを無効化することでパフォーマンス向上を期待できますが、以前の記事で紹介した通り、Sortを無効にするとzによる重ね合わせ指定が無効となってしまいます。Sortが無効にできる状況かをよく確認してから適用するべきでしょう。
また、有料版のJointJS+では仮想レンダリングを使用することでパフォーマンスに強みがあるという情報もあります。どうしてもパフォーマンスに課題が出てしまうという状況であれば、JointJS+の導入も検討してみてください。
※この記事は JointJS Advent Calendar 2023 の記事です。他の記事を読む場合はカレンダーのページを参照してください。