Avoid full style recalculation by setting custom property only on element that uses it #597
Conversation
✅ Deploy Preview for colorjs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…ment that uses it Since the `--scrolltop` custom property is only used on the `#toc` element, we can avoid a *full* style recalculation of all elements on the page which can take very long, and causes massive framerate drops during scrolling. This should not result in any changed behavior or appearance as no other element uses the custom property.
Inwerpsel
force-pushed
the
optimize-scrolltop-custom-property
branch
from
578a637
to
2098afd
Compare
|
Thanks! Though ideally, we need to fix this even for pages that do have a TOC. @DmitrySharabin is actually investigating a potential fix right now. |
|
This does also address the performance issue on pages with a TOC. On those pages, in the previous version it would have to style recalculate all elements on the page before it was able to paint the scroll. With these changes, it only recalculates the TOC itself, which speeds the recalculation up by a factor of about 20 to 50 (see screenshot above of tasks run during scrolling on a page with a TOC). This effectively removes the performance issue. So it might be a quick win if the required changes would take a bit longer. |
|
@Inwerpsel Your fix with CSS does the job nicely, to my mind. We don't need the |
Addresses #587
This PR is a safer alternative to #592 as it does not change any of the CSS logic, it only sets the custom property at a lower level in the tree.
Since the
--scrolltopcustom property is only used on the#tocelement, we can set its value on that element instead of the root element. This avoids a full style recalculation of all elements on the page which takes very long, and causes massive framerate drops during scrolling.This should not result in any changed behavior or appearance as no other element uses the custom property. It should be a pure optimization with no risk for regressions.
Comparing the performance recordings before and after this change, you can observe the time spent on style recalculation is reduced to a fraction. The long purple chunks shrunk became almost too small to see on the right.
https://colorjs.io/docs/spaces vs https://deploy-preview-597--colorjs.netlify.app/docs/spaces