CSS Performance

Collections

• Does shadow DOM improve style performance?: Kinda. It depends. And it might not be enough to make a big difference in the average web app. But it’s worth understanding why.
• How I made Google’s data grid scroll 10x faster with one line of CSS

  table {
    contain: strict;
  }
  

• When is it “Right” to Reach for contain and will-change in CSS?: the will-change property
• Frontend Web Performance: The Essentials [0]: Layout Bad, Composite Good
  • https://csstriggers.com/
  • https://gist.github.com/paulirish/5d52fb081b3570c81e3a
• The truth about CSS selector performance
• The Ultimate Low-Quality Image Placeholder Technique
• CSS :has() performance - Browsers are really good at doing style recalculation. This isn't something we need to worry about. 😄
• Improving rendering performance with CSS content-visibility
  • This final solution achieved around a 45% performance improvement in both Chrome and Firefox, reducing the load time from 3 seconds to 1.3 seconds.
  • While satisfied with the content-visibility approach, the author acknowledges that a true virtual list implementation would likely provide even better performance, especially for larger datasets.