Performance Optimization: Improving the Processing Speed of Inline Styles

[D-Sketon]

I tried using this library to compress my blog, but found that it runs significantly slower compared to other libraries. After analyzing the flame graph, I discovered that nearly half of the time is spent on minifyCss(since my HTML contains many styles and inline styles).

Is it possible to improve the running speed of cssnano?

[D-Sketon]

Potential optimization points: Since certain cssnano optimization plugins have no effect on inline CSS—such as mergeRules, minifySelectors, minifyParams, normalizeCharset, uniqueSelectors, and normalizeUnicode—perhaps we can exclude these plugins when processing inline styles to improve performance.

[D-Sketon]

BTW, I found that about 20% of the time was spent on this function: https://github.com/Nyalab/caniuse-api/blob/1b74c10257e36877709da4f6630513db10203a78/src/index.js#L34. It appears that some cssnano optimization plugins call this function, but due to the lack of a proper caching mechanism, it has become a performance hotspot.

[maltsev]

Thanks for looking into that!

It should be possible to optimize, I think. I hope someone will look into that at some point :-)

[maltsev]

@D-Sketon can you please submit your testing code? I'll try to look into optimizing cssnano run.

[D-Sketon]

@maltsev I have written some simple benchmark code at https://github.com/D-Sketon/htmlnano-benchmark . You can run npm run bench and npm run profile to run the tests.