search

stylify / packages

💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎.
https://stylifycss.com
MIT License
429 stars 9 forks source link

Runtime performance improvement #188

Open Machy8 opened 1 year ago

Machy8 commented 1 year ago

Describe the problem

Caching: The compile() method of the Compiler class is called multiple times, which can be time-consuming. Caching might improve performance.

Reducing DOM operations: The updateCss() should be called on requestAnimationFrame() to batch the changes and update the CSS in a single pass.

Using getElementyByClassName instead of querySelectorAll()

Use of const instead of let and var: it helps avoid re-declarations and re-assignments.

Redraws only when css changed : call callHook() method in the updateCss() method, only call it when the css has been changed.

Inner html vs outerHtml: Use of innerHTML or textContent instead of outerHTML when updating the DOM.

Unused code: Check out for unused initMutationObserver()

Describe the proposed solution

.

Alternatives considered

.

Importance

nice to have

MilesPernicious commented 1 year ago

Ah I didn't see this issue when making my PR #226 226. I can try tackling this if you like!

Machy8 commented 1 year ago

Sure, if you want, you can take any point you want (or even any other if you find something you want to improve). I will connect all those PR with this issue. I have planned to solve this issue slowly after releasing the 1.0 version, so there will be no conflicts between our branches as I am not focusing on Runtime now.

Some of those points are not explained well enough though, because it's just a scratch of what I had in my head when I was browsing the Runtime. So feel free to improve literally anything you want :).