This isn’t exactly a question about Observable so my apologies if it’s hopelessly vague or off-topic, but I’ve been working on a relatively visualization-heavy notebook. As I’ve started to dislike the content of the notebook slightly less, the visualizations have become increasingly janky. At 75% width everything is smooth, but at 100% width things flicker very badly whenever I interact with the diagrams.
Here’s the notebook (please don’t share the link just yet. Content aside, it’s just too broken. ) https://observablehq.com/d/6328fc7ba0803522
I’ve done some pretty mediocre things as far as efficient rendering is concerned (poor SVG element reuse, first and foremost); I just don’t happen to understand why the particular things I’ve done are so bad. Relevant features:
- the visualizations are SVG diagrams on top of WebGL canvases (yes, should really be a foreign object instead…)
- resizing the window triggers creation of new WebGL contexts which is very slow and very bad. I’ve tried solving that here, but that’s not what this question is concerned with
- it avoids rendering WebGL (the background colors) or triggering cell updates when you interact (i.e. it shouldn’t be so bad to drag the blue dots)
- it does a fair amount of SVG teardown and creates new elements when interacting—which is bad; I just don’t feel like it should be this bad given the modest number of SVG elements
- profiling suggests it’s janky even when there are plenty of ms to spare
- There’s a bit of computation going on (~8ms) but not a ton
- It seems like it’s gotten worse as the notebook as a whole has gotten larger. This makes me think improving the SVG visualizations is a moderate amount of work and still (perhaps?) wouldn’t solve it.
In summary, I sorta suspect that SVG is triggering a lot of page-wide relayout that just doesn’t scale well. Best is maybe to rework the visualizations into 100% WebGL or SVG with GPU-accelerated CSS transforms, but that’s a lot of work without knowing if it’d even help.
I’m not expecting full diagnostics, but I’d love to be able to use Observable to make complicated things without agonizing over performance, so I’m curious to know if this is something people have struggled with or if obvious problems jump out.