付箋をたくさん出すと重い

https://gyazo.com/060454e467076e3f23a391a19f8746ee

100枚付箋を出すと、手書きが困難になるレベルで重い

付箋が動き回ってるわけでもないのに手書き時に重たいのはおかしい

全体を再描画しているのか？？

付箋が10枚程度しか画面に出ていない状態(オブジェクト自体は10000個ある)でペン入力を試して、FPSが1近くまで落ちている

ペン入力の最中に画面外まで含めて全部再描画してそう

PCだと問題を再現するのに10000付箋とかにしているので「そんなに出すことないだろ」って話なんだがiPadだと100枚で不快な遅延を感じるレベルなのでこれではダメだ

手書きは速度にセンシティブたから、まあキャンバスを分けることになるだろう

付箋が100枚表示されてる状態でのズームや付箋の移動は、頻出ユースケース

そこがストレスフルでは根本的に困る

マシンの性能が本質的に不足しているのではないと思う

paper.jsを素直に使うと、paper.jsが汎用的に作ってるせいで枝刈りが出来ない

ユースケースと密結合に作れば期待してる程度の性能は出ると思う

今回の想定ユースケースでは、ユーザが編集したものは常に最前面に来るので、編集対象のキャンバスと保持のためのキャンバスを重ねるのはまあOKだろう

「画面上に箱が100個並んでる絵」程度のものが滑らかにスクロールやズームできないのはやはりおかしい

touchmove的なイベントで重たい処理が走らないようにする必要がある

一方paper.jsはおそらく:

ズームを変更すると画面内にあるかどうかと無関係にオブジェクトツリーを全部辿って再描画

オブジェクトを追加すると同様に全部再描画

理由:

付箋が画面外にあっても重たくなる

他のオブジェクトが変更されていない状態での手書きがラグる

手書き中のパスの追加で重たい処理が走っているから