BRUCE_FE Frontend Interview Notes - User Interaction Optimization - RequestAnimationFrame to Prevent Animation Frame Drop

// Basic usage
function animate() {
  // Update animation state
  element.style.left = `${position++}px`;
  
  // Recursive call, create animation loop
  requestAnimationFrame(animate);
}

// Start animation
requestAnimationFrame(animate);

// Cancel animation
const animationId = requestAnimationFrame(animate);
cancelAnimationFrame(animationId);

// Smooth scroll to page top
function scrollToTop() {
  const currentPosition = window.pageYOffset;
  
  if (currentPosition > 0) {
    // Smooth scroll with 10% of current scroll distance
    window.scrollTo(0, currentPosition - currentPosition / 10);
    requestAnimationFrame(scrollToTop);
  }
}

// Click button to start smooth scroll
document.querySelector('.scroll-top-button').addEventListener('click', function() {
  requestAnimationFrame(scrollToTop);
});

// Bad practice: Multiple elements alternating read/write, causing multiple forced reflows
function badAnimation() {
  const boxes = document.querySelectorAll('.box');
  
  boxes.forEach(box => {
    // Read DOM (forces browser to calculate latest layout)
    const width = box.offsetWidth;
    
    // Write DOM (changes layout)
    box.style.width = `${width + 1}px`;
    
    // Read again (forces layout recalculation again)
    const height = box.offsetHeight;
    
    // Write again (changes layout again)
    box.style.height = `${height + 1}px`;
  });
  
  requestAnimationFrame(badAnimation);
}

// Good practice: First batch read all data, then batch write
function goodAnimation() {
  const boxes = document.querySelectorAll('.box');
  const measurements = [];
  
  // Read phase - read all needed data at once
  boxes.forEach(box => {
    measurements.push({
      width: box.offsetWidth,
      height: box.offsetHeight,
      element: box
    });
  });
  
  // Write phase - complete all DOM modifications at once
  measurements.forEach(data => {
    data.element.style.width = `${data.width + 1}px`;
    data.element.style.height = `${data.height + 1}px`;
  });
  
  requestAnimationFrame(goodAnimation);
}

/*
Layout thrashing visualization comparison:

Bad practice (multiple reflows):
┌─────────────────────────────────┐
│ Read element1 size → Reflow #1  │
│ Modify element1 size            │
│ Read element1 height → Reflow #2│
│ Modify element1 height          │
│ Read element2 size → Reflow #3  │
│ Modify element2 size            │
│ Read element2 height → Reflow #4│
│ Modify element2 height          │
│ ...                             │
└─────────────────────────────────┘
Result: Multiple forced reflows in one frame, performance degrades

Good practice (batch processing):
┌─────────────────────────────────┐
│ Read all element sizes → Reflow #1│
│ Modify all element sizes and heights│
└─────────────────────────────────┘
Result: Only one reflow in one frame, performance improves
*/

// Bad practice: Modify left/top (triggers layout)
function inefficientMove() {
  box.style.left = `${xPos}px`;
  box.style.top = `${yPos}px`;
}

// Good practice: Use transform (only triggers compositing)
function efficientMove() {
  box.style.transform = `translate(${xPos}px, ${yPos}px)`;
}