Hacker News new | ask | show | jobs
by WorldMaker 3369 days ago
<style> tags in the middle of the DOM often have a rerendering penalty (most browsers force an entire page rerender each time they encounter one).

In a past life a website I worked on had a huge browser paint performance and content flash issue that was eventually cleared out by moving all the styles out of <style> tags in the DOM.
1 comments
bastawhiz 3369 days ago
Most webpack loaders put them in the <head>
link
WorldMaker 3369 days ago
Fair point. Once packed into the <head> is better.

There's still a care to be taken when using <style> tags in development. I know developers don't always respect development performance (because it's just development), but that performance can still matter: to you in your debug cycle time, and also sometimes bad performance in development masks bad performance that will impact production (and developers don't notice it because it "always performs that way when I test").

For that reason, bringing the aside somewhat back on topic, I often prefer to use minified stylesheets/JS in development and trust sourcemaps to do their job when I need to debug them.

link