Freezes the browser for a long time in local environment with Vue.js

[daniele-pelagatti]

Hello, thanks for your work.

We are using this package in Vue.js and, when running the project locally with webpack-dev-server (ONLY when running it locally) we run into a very long browser freeze which we have pinpointed to
generatePageCSS and more specifically to a very long series of calls to csshack.

Attached you can find a Chrome profiler session where the problem occurs:
aframe-html-embed-problem.zip

Do you have any clue about what's happening?

As I mentioned, thi sonly happens in http://localhost:8080 , when the app is built and deployed to an https server the problem goes away.... still I find it worth reporting.

Thanks

[michaelthatsit]

I had a similar thing happen while using React. The issue is that GeneratePageCSS and csshack are both reloading ALL of the stylesheets on the page every time the component is initialized. Which I argue is unnecessary, as it should only be reloading the CSS relevant to the component.

I forked the repository and made the necessary adjustments. You'd need to isolate all the CSS relevant to your component and then give the stylesheet an ID, and then set the styleSheetID parameter to that ID. this directs the component to only reload that styleSheet. Improving performance (no more freezing) and reducing side effects (breaking style of the page).

[lmcarreiro]

Same issue here, but on plain HTML+JS+CSS. It calls csshack a lot of time which seems to be a waste, as it seems to be the kind of code that should run once. Did some of you find some workaround?