Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reason for fetching CSS every transition #4

Open
Innominus opened this issue Dec 25, 2024 · 2 comments
Open

Reason for fetching CSS every transition #4

Innominus opened this issue Dec 25, 2024 · 2 comments

Comments

@Innominus
Copy link

Innominus commented Dec 25, 2024

Hello!
I'm going to assume it's a necessary part of the polyfill, but I'm wondering why the CSS files are re-fetched every transition, and I'm wondering what effect this actually has on performance of the polyfill - do the CSS files get re-parsed every transition?
Thanks! Love the polyfill.
image
Note: Is this part of the polyfill only necessary for MPA/SSR applications? If it's not necessary for SPA applications, I'm wondering how easy it would be to remove the section on my own personal fork to stop refetches (only if it actually has a tax on performance).

@Innominus
Copy link
Author

On further look, it seems it needs to fetch the css to parse so it can understand what it's animating, which makes sense, of course.
But this seems to make a noticeable delay on transition each time, even though it's calling a cached CSS file.
Is there a way to have a flag or set it in a way that it caches after the first transition/when it first runs? I know this isn't a use case for everyone, but reducing the delay by caching would be handy for those who have CSS files that are only loaded once.
I might have a look at the code and see if I can at least create a forked POC.

@demarketed
Copy link
Owner

demarketed commented Jan 3, 2025

I have made a branch which includes a version of the polyfill with perfomance markers. It includes a guide in the README.

In my experience testing it, I have found that the bulk of the time taken to process a transition is taken up by the element cloning function, while stylesheet parsing, even if it does duplicated work, take up little time in comparison.

I had tried de-duplicating style parsing work earlier in development through basic string equality, but I had found that it didn't improve the perfomance. However, I am pretty sure there is no way for JavaScript to tell whether a fetched stylesheet was cached and need not be parsed again. If there is a better way to check whether a style sheet should be parsed again or not, it could be added to the polyfill.

Thanks! Love the polyfill.

I love to hear that 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants