JointJSでは多くの図形を描画する場合にパフォーマンスへの影響が懸念されます。大量の図形を描画しようとした際に、コード側で対策をすることができるのかがきになるところです。
今回はいくつかの設定値をピックアップし、実際に計測を行うと設定の有無でパフォーマンスの改善の余地があるのかどうかを調査していきます。

【検証1】Graphに追加するときのSortの有無

概要

GraphのaddCell()/addCells()メソッドではオプションで{sort: false}を指定することで追加したCellの順序を整理するかどうかを指定できます。この設定がどれくらいパフォーマンスに影響するかを確認します。

検証方法

100個 / 1,000個 / 10,000個のRectangleをそれぞれ生成し、addCells()メソッドで同時に追加したときの時間を{sort: false}/{sort: true}をつけてそれぞれ計測した

検証結果

Sortを行わない方が速い
ただし1,000個未満くらいの個数であればあまり差は出ない

実行結果ログ.txt

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の有無はパフォーマンスには影響がなかった。

実行結果ログ.txt

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を使用しているかどうかはパフォーマンスには影響が無いことがわかった。

実行結果ログ.txt

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 の記事です。他の記事を読む場合はカレンダーのページを参照してください。