HTML/CSSAdvanced#css#performance

How does the 'will-change' property affect rendering performance?

will-change hints to the browser that a property (like transform or opacity) will change soon, letting it optimize ahead of time (e.g., promoting the element to its own compositor layer). Overusing it on many elements wastes memory and can hurt performance, so apply it sparingly and only right before the change happens.

Example
.card { will-change: transform; }
.card:hover { transform: scale(1.05); }
/* Better: add via JS just before animating, remove after */

Related Questions

1
HTML/CSSIntermediate#html#semantics

What is the difference between HTML5's <section>, <article>, and <aside>?

Open
2
HTML/CSSBeginner#html#structure

What is the difference between the <head> and <body> sections of an HTML document?

Open
3
HTML/CSSBeginner#html#accessibility

What is the purpose of the alt attribute versus the title attribute on images?

Open