Graphite icon indicating copy to clipboard operation
Graphite copied to clipboard

Improve rendering performance by isolating canvas SVG elements in a Shadow DOM

Open Keavon opened this issue 2 years ago • 2 comments

This aims to reduce the time spent in the "Recalculate Style" part of the "Rendering" slice of the page framerate performance in the Chome DevTools profiler. However it does seem to come at the cost of additional time spent on "Parse HTML". All in all, it seems to be roughly faster by 10-20 FPS when the frames are taking around 250-300ms to render with a stress test showing tons of overlays.

Keavon avatar Apr 22 '22 20:04 Keavon

We should also probably isolate the thumbnails in a shadow DOM, and perhaps rate limit their updating when performance is tanking. After doing this for thumbnails, then we'll be in a state where we can fairly compare the performance. But currently this has gains in some areas and losses in others so it's mostly a tossup.

Keavon avatar Apr 22 '22 21:04 Keavon

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: eb99ccc
Status: ✅  Deploy successful!
Preview URL: https://b564da70.graphite-master.pages.dev
Branch Preview URL: https://shadow-dom.graphite-master.pages.dev

View logs

cloudflare-pages[bot] avatar Apr 22 '22 23:04 cloudflare-pages[bot]

I may or may not revisit this someday and attempt to extend this to also handle the thumbnails that are potentially also adding overhead of the similar sort, and then benchmark it again to see if the results aren't a wash like they are in the current state.

Keavon avatar Aug 29 '22 04:08 Keavon