event-handling-performance

Event Handling Performance Rules - Three-Phase Strategy

APPLY: EVERY QUERY - CRITICAL PERFORMANCE RULE

AEM Performance Principles (REQUIRED)

Based on AEM's performance guidelines:

• Phase E (Eager): Minimal event handlers for LCP elements only
• Phase L (Lazy): Interactive enhancements and below-fold interactions
• Phase D (Delayed): Third-party event handlers after 3+ second delay

Phase E - Critical Event Handlers Only (REQUIRED)

Minimal event attachment for LCP elements to stay under 100kb budget

// ✅ REQUIRED - Phase E: Only critical event handlers for LCP elements
const attachCriticalEvents = (element) => {
  const isFirstSection = element.closest('.section') === document.querySelector('.section');
  
  if (isFirstSection) {
    // Phase E: Only essential events for LCP elements
    if (element.matches('button, [role="button"]')) {
      element.addEventListener('click', handleCriticalAction, { passive: false });
    }
    
    // Avoid heavy event handlers in Phase E
    // NO scroll listeners, resize handlers, or mouse tracking
  } else {
    // Phase L: Full event handling for below-fold elements
    attachEnhancedEvents(element);
  }
};

Phase L - Enhanced Event Handling (REQUIRED)

Full interactive functionality after LCP is achieved

// ✅ REQUIRED - Phase L: Rich interactions after LCP
const attachEnhancedEvents = (element) => {
  // Wait for LCP before adding interactive enhancements
  const observer = new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries()[list.getEntries().length - 1];
    if (lcpEntry) {
      // Now safe to add interactive event handlers
      attachFullEventHandlers(element);
    }
  });
  
  observer.observe({ entryTypes: ['largest-contentful-paint'] });
};

const attachFullEventHandlers = (element) => {
  // Throttled/debounced events for performance
  element.addEventListener('scroll', throttle(handleScroll, 100), { passive: true });
  element.addEventListener('resize', debounce(handleResize, 250), { passive: true });
  element.addEventListener('input', debounce(handleInput, 300));
};