search

material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
362 stars 28 forks source link

Slow performance due to how style elements are inserted. #158

Closed emilio closed 6 months ago

emilio commented 1 year ago

Describe the bug https://m3.material.io/theme-builder#/dynamic is way slower than it needs to be. Investigating a Firefox bug report I noticed that the way you build your stylesheets is very suboptimal.

See the analysis and test-case there, but TLDR instead of appending to a stylesheet in the DOM one property at a time, you should either disable the stylesheet, build it, then enable it, or build a single text node.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://m3.material.io/theme-builder#/dynamic

Expected behavior It's fast.

romanr commented 1 year ago

On a fastest computer and network it still takes few minutes every time you change any colour. Nobody can afford waiting times like that. It is the slowest Figma plugin I encountered.

rgdagir commented 1 year ago

Second that ^ changing anything on my themes and updating a library of components take ages....