performance

name	performance
description	JavaScript performance optimization and Web Vitals improvement techniques.
sasmp_version	1.3.0
bonded_agent	08-javascript-testing-quality
bond_type	PRIMARY_BOND
skill_type	reference
response_format	code_first
max_tokens	1500
parameter_validation	{"required":["topic"],"optional":["metric_type"]}
retry_logic	{"on_ambiguity":"ask_clarification","fallback":"show_common_optimizations"}
observability	{"entry_log":"Performance skill activated","exit_log":"Performance reference provided"}

JavaScript Performance Skill

Quick Reference Card

Core Web Vitals

Metric	Target	Measures
LCP	< 2.5s	Largest content paint
INP	< 200ms	Interaction responsiveness
CLS	< 0.1	Visual stability

Debounce & Throttle

// Debounce - delay until pause
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

// Throttle - limit frequency
function throttle(fn, interval) {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= interval) {
      lastCall = now;
      fn(...args);
    }
  };
}

// Usage
window.addEventListener('scroll', throttle(handleScroll, 100));
input.addEventListener('input', debounce(search, 300));

DOM Performance

 heights = elements.( el.); 
elements.( el.. = heights[i] + ); 


 fragment = .();
items.( {
   li = .();
  li. = item;
  fragment.(li);
});
list.(fragment);


 () {
  
  (animate);
}
(animate);