Struggling with janky rendering

Community Help
1

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. :pray:) 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.

Thanks!

2 Likes
2

I almost feel like intelligent use of overflow: hidden might limit the extent of relayout or that there might be some similar magic trick worth trying.

3

I’m only seeing flickering in Chrome, so I suspect it’s yet another instance of this Chrome bug (previously discussed here and here).

Workarounds:

  • use Firefox or Safari
  • disable either:
    • chrome://flags/#site-isolation-trial-opt-out
    • chrome://flags#enable-gpu-rasterization
3 Likes
4

Thanks so much, @bgchen! The opt-out immediately resolves it :clap: (and apologies, I should have mentioned I was using Chrome, though one may perhaps take that for granted these days… :confused:) I guess I’m strangely content that my gut instinct that simply improving the efficiency was not going to be enough to solve it proved correct, except now we’re in bugland. :disappointed:

1 Like
5

No problem, glad I could help! The notebook looks awesome by the way!

1 Like
6

Do you think the best solution for now is either warning users they need to disable chrome://flags#enable-gpu-rasterization (which seems less of a security risk than the first?) or to simply write shorter notebooks?

7

To be honest, I’m not sure. In the notebooks where I’ve mentioned it, I suggest using Firefox / Safari since I wasn’t aware of the flag workaround. I just hope Chrome gets patched with a fix soon…

8

I ended up checking the user agent and throwing up a warning with a couple suggestions if you’re using Chrome. :man_shrugging: (hashtag yolo)

1 Like