EN/CH Mode

BRUCE_FE Frontend Interview Notes - User Interaction Optimization with will-change Hardware-Accelerated Animations

In-depth analysis of CSS will-change property in frontend animation optimization, including hardware acceleration principles, best practices, and common interview questions to help create smooth user experiences.

EN/CH Mode

Lazy to read articles? Then watch videos!

Basic Concepts

will-change is a CSS property that allows the browser to prepare for element changes in advance, enabling hardware acceleration beforehand. It tells the browser: "This element is about to change, please prepare in advance," resulting in smoother animations and better user experience.

When the browser knows an element is about to change, it can create independent layers and allocate GPU resources in advance, reducing rendering latency and making animations smoother.

Hardware Acceleration Stages

Browser Rendering Process (CRP Path):

Step	Description	Hardware Acceleration Impact
Parse HTML/CSS	Build DOM and CSSOM	No impact
Build Render Tree	Merge DOM and CSSOM	No impact
Layout Calculation	Calculate element position and size	Hardware acceleration can skip this step
Paint	Paint elements to multiple layers	Hardware acceleration can skip this step
Composite	Composite layers to display on screen	Hardware acceleration takes effect here, using GPU for acceleration

┌─────────────────────────────────────────────────────────────┐
│ Browser Rendering Process                                    │
└─────────────────────────────────────────────────────────────┘

HTML/CSS ──> DOM/CSSOM ──> Render Tree ──> Layout ──> Paint ──> Composite
                                          │         │        │
                     Recalculate Layout ──┘         │        │
                                                   │        │
                            Repaint Screen ────────┘        │
                                                           │
                            Layer Composite (GPU Accel) ────┘

Hardware acceleration elevates elements to separate layers, utilizing GPU for the composition process, bypassing expensive layout and paint operations. When element properties change:

Without Hardware Acceleration

1. Element change → Triggers re-layout
2. Repaint entire or partial screen
3. Composite and display
4. High CPU load, poor performance
5. May cause stuttering and frame drops

With Hardware Acceleration

1. Element changes on separate layer
2. Skip re-layout and repaint
3. Direct composition and display on GPU
4. Low CPU load, better performance
5. Smoother animations, less stuttering

will-change Usage Methods

The will-change property is relatively simple to use, but you need to pay attention to timing and scenarios:

Basic Syntax

/* Basic syntax */
.element {
  will-change: property-name;
}

/* Example: Optimize transform animation */
.card {
  will-change: transform;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

/* Multiple properties optimization */
.animated-box {
  will-change: transform, opacity;
}

Common will-change Values

Property	Use Cases
`transform`	Translation, rotation, scaling and other transform animations
`opacity`	Fade in/out, opacity transitions
`scroll-position`	Optimize scrolling performance, commonly used in scrolling lists
`contents`	Element content will change
`auto`	Restore default state, let browser decide automatically

Notes and Limitations

1. Not all CSS properties are supported - will-change mainly supports properties that can trigger compositing layers, including:
- 1. transform
- 2. opacity
- 3. filter
- 4. backdrop-filter
- 5. scroll-position
- 6. contents
- 7. clip-path
- 8. mask / mask-image
- 9. perspective
2. May cause resource waste - Overuse will increase memory usage and battery consumption
3. Improper use can backfire - Over-optimization can actually decrease performance
4. Browser compatibility - Well supported in modern browsers, but not supported in IE
5. Debugging difficulties - Some optimizations are browser internal implementations, making effects hard to observe directly

The core principle of using will-change for performance optimization is 'moderate use'. It's a double-edged sword - when used properly it can significantly improve user experience, but overuse can be counterproductive.

Best practice is: only add it when truly needed and remove it promptly after animations end - this is how to achieve real performance improvements.

will-change Best Practices

1. Don't Overuse

will-change should only be used when truly needed. Overuse will cause the browser to create too many layers, consuming excessive memory and actually decreasing performance.

❌ Bad Practice

/* Don't use will-change on all site elements */
* {
  will-change: transform;
}

/* Don't use on many elements simultaneously */
.many-items {
  will-change: transform, opacity; /* Each element will have its own layer */
}

✅ Good Practice

// Only add before changes are about to happen
element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});

// Remove after changes are complete
element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';
});

2. Add in Advance, Remove Promptly

Add will-change before elements are about to change, and remove it promptly after animations end to free up resources.

// Typical usage pattern
const animatedElement = document.querySelector('.animated');

// Add when user is about to interact
animatedElement.addEventListener('mouseenter', () => {
  // Prepare in advance
  animatedElement.style.willChange = 'transform';
});

// Interaction starts
animatedElement.addEventListener('click', () => {
  animatedElement.classList.add('animate');
});

// Remove will-change after animation ends
animatedElement.addEventListener('transitionend', () => {
  // Free up resources
  animatedElement.style.willChange = 'auto';
});

3. Appropriate Use Cases

Recommended Scenarios	Not Recommended Scenarios
Elements with complex animations	Static or rarely changing elements
Elements about to be interacted with	Site-wide global styles
Long lists requiring smooth scrolling	Unclear potential changes
Drag and drop interaction elements	Simple animations that already perform well

Common Interview Questions

(1) What is the main purpose of will-change?

Answer:

The main purpose of the will-change property is to inform the browser in advance about upcoming element changes, giving it a chance to prepare before the changes occur, thus optimizing rendering performance. Specifically:

1. Browser allocates separate layers for the element in advance
2. May prepare for GPU acceleration
3. Reduces calculation and processing delays when actual changes occur
4. Makes animations and changes smoother, improving user experience

(2) When should will-change be used?

Answer:

will-change should be used in the following situations:

1. Elements have complex animations or frequent state changes
2. Animations noticeably stutter or perform poorly without will-change
3. Add before user interaction begins, remove after interaction ends
4. Suitable for sliding menus, drag elements, flipping cards and other interactive elements

Should not use will-change in these cases:

1. As global styles or applied to many elements
2. When elements have no clear changes or changes are simple
3. As a universal solution for fixing performance issues

(3) How does will-change affect web performance?

Answer:

Positive Impact

1. Improves animation and interaction smoothness
2. Reduces frame drops and stuttering
3. Reduces CPU load by utilizing GPU for rendering
4. Skips unnecessary rendering stages, improving efficiency
5. Improves user experience, especially on complex pages

Negative Impact

1. Overuse increases memory consumption
2. May lead to excessive layer creation
3. Misuse can slow down initial rendering
4. May increase battery consumption on mobile devices
5. May cause unexpected rendering issues

(4) How to avoid misuse of will-change?

Answer:

1. Don't use extensively in CSS rules - Avoid using will-change in global or broad selectors

2. Use JavaScript to add and remove dynamically - Add when needed, remove when not

// Good practice:
element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});

element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';
});

3. Only apply to elements that truly need it - Prioritize elements with complex animations or frequent changes
4. Measure, don't guess - Use DevTools performance tools to confirm if it's really needed and effective
5. Avoid chain reactions - Be aware that element changes may affect others, don't add will-change to all related elements