テキスト絵文字の生成が非同期じゃない＆ちょっと遅い問題
最終的な絵文字の生成 (エフェクトの付加など) は Web Workers で非同期でやっていて、新しいジョブが来たら古いジョブは止めるようにしている。ので、パラメータをぐりぐりしても遅延はそこまでない。 一方テキスト絵文字は canvas で普通に同期的にやっているので、ぐりぐりするとタスクが詰まって遅れることがある。
テキスト絵文字を Web Workers に移す作戦
素直に Canvas でやる場合
polyfill があるのは見つけたけど、魔術っぽさあるのでちゃんと読んだ方が良さそうな気がする
いっそ canvas を使わない作戦
ワーカーでパスを作れば一応非同期にはなる
まあでもオーバーキルっぽいかなあ
描画したテキストのサイズ svg.getBBox() がいったん (DOM 上に) レンダーしないと取れないっぽいのもだるそうか
→ と思ったけどなんかサイズ測るメソッドとかは生えてそう
→ やってみたけど、フォールバックフォントが使えないため、カラー絵文字などに対応できなくなる問題があった
対症療法：タイマーで間引く
本質的ではないけど、タイマーで間引けばとりあえず負荷は下がる。
追記
2022/7/26 タイマーで間引く方法でとりあえず応急措置
2022/11/1 テキスト絵文字周りの実装は canvas から svg になった、が、引き続き worker で動かないのは変わらず
→ 問題が発覚したので戻した