Performance issues in editor

[CompuIves]

I've been pulling my hair out with this. On my Macbook Pro 13" the editor is much slower than the embed:

https://codesandbox.io/s/new
https://codesandbox.io/embed/new

For me the embed is twice as fast.

I want to know if others experience the same, and if anyone knows what the editor does to make it so slow. This is frustrating!

[kvklink]

Looking at the Chrome performance tool, /embed/new takes ~3500ms and /s/new takes ~3700ms on Linux.
How relatively small the difference may be, it's definitely there. What kind of loading times are you having?

[Anenth]

@CompuIves editor loads pretty fast for me, but the preview takes ages to load

[crazyyi]

How did you measure the page loading?
I use https://tools.pingdom.com to measure.
Took 1.51s to load 594 kB for https://codesandbox.io/s/new.
It took 1.11s to load 426.3kB for https://codesandbox.io/embed/new.

But to be honest I don't feel too much difference on my computer (Macbook pro 2017)

[lbogdan]

@CompuIves Is this still an issue?

[drcmda]

@CompuIves I was just about to open an issue, then i saw this ... I'm still not sure if you only mean loading time, but for a while now i have observed sometimes drastic differences in performance in general between the embed and the editor.

I tried to capture it, but it's hard to see:

In front of me, though, the editor is visually janky and choppy, it drops frames, while the embed is fine and runs smooth.

I tried to profile it and the only difference i can see seems to be related to composite layer drawing, which takes a significant amount of time in the editor:

Embed:

Editor:

[CompuIves]

That's very interesting. I'm curious what the cause could be of longer composite layer drawing in the editor vs the embed, maybe the amount of elements or the amount of css on a page? I think that @tkh44 has done some research on this.

If we know the cause and can fix it we will get a muuch smoother editor experience.

[tkh44]

Just saw this. Is this still an issue you are looking into?

[CompuIves]

Yes, I've looked at it some moments but couldn't find the root cause of the big difference between embed/app. It's really frustrating because it feels like there is one root cause here.

[tkh44]

If you put the embed in an iframe on another page how does it perform? This would be a way to test the performance in a relative manner(I want to say this issue stems from iframe overhead).

[vvo]

We need @samccone to do a performance audit of CodeSandbox :D

[CompuIves]

Oh @tkh44 in our case the embed is actually faster than the editor! I don't know what causes such big composite drawing times, maybe more elements?

[drcmda]

Maybe starting out with the editor, running a base profile, then switching off regions in it with the h-key in devtools to circle in on the area that's causing it. Debugging browser specific stuff is otherwise hard to track down.

[Saeris]

Closing this issue as it's been nearly a year since there was any discussion and the codebase has change significantly since this was first opened.