Performance Optimization Techniques

What rendering optimization technique is shown here?

const elem = document.getElementById('myElement');

// Bad
for (let i = 0; i < 1000; i++) {
  elem.style.left = i + 'px';
}

// Good
requestAnimationFrame(() => {
  elem.style.transform = 'translateX(1000px)';
});

DOM caching
Event delegation
CSS transform optimization
This demonstrates layout optimization through: 1) Using CSS transforms instead of position properties, 2) Avoiding forced reflow/layout calculations, 3) Utilizing GPU acceleration for animations, 4) Batching visual updates with requestAnimationFrame, 5) Preventing multiple style recalculations, 6) Reducing browser rendering workload, 7) Improving animation performance and smoothness, 8) Following browser rendering optimization best practices.
Layout thrashing prevention

Next Question (11/20)