What methods of rendering (re-layout) optimization do you know?

Rendering optimization (recalculating styles and layout) is achieved by minimizing or eliminating operations that trigger Layout (reflow or recalculating positions and sizes of elements). Such operations include:

• Changing geometric properties: width, height, left, top, margin, padding.
• Changing content: adding/removing nodes, changing text.
• Changing properties affecting document flow: display, float, position.
• Accessing computed styles or sizes: element.offsetWidth, getComputedStyle().
• Resizing the browser window.

Optimization methods:

1. Avoid synchronous forced Layouts: Obtain Style/Layout information before making changes that could trigger Layout, then perform all changes in batches.
2. Use transform and opacity: These properties modify the element without affecting the geometry of other elements, causing only Composite and Paint, but not Layout.
3. Apply will-change: This attribute informs the browser about expected changes to an element, allowing pre-optimization of rendering (e.g., moving the element to a separate GPU layer). Use wisely, as it can increase memory consumption.
4. List virtualization: Render only the list items visible at the moment, significantly reducing the number of DOM elements.
5. Remove element from flow: For complex animations requiring frequent geometric changes, temporarily remove the element from the normal document flow (e.g., using position: absolute or fixed), perform the animation, then restore it.
6. Debouncing and throttling events: Limit the frequency of event handler calls (e.g., scroll or resize events) that can trigger Layout.

// Example of synchronous forced Layout
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Triggers Layout
element.style.height = (height + 10) + 'px'; // Triggers Layout again

// Optimized example (batch changes)
const element = document.getElementById('myElement');
// Get value before changes
const height = element.offsetHeight; 
// Make all changes at once
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Using transform instead of left/top for animation */
.animated-element {
  transform: translateX(100px); /* Causes Composite */
  /* Instead of left: 100px; which causes Layout and Paint */
}

/* Applying will-change */
.will-animate {
  will-change: transform, opacity; 
}