performance

performance

const debounce = (fn, ms) => {
  let id;
  return (...args) => {
    clearTimeout(id);
    id = setTimeout(() => fn(...args), ms);
  };
};

eventi

button.addEventListener("click", () => console.log("tap"));

arrow functions

const greet = (name) => `ciao ${name}`;

async

async function load() { return await Promise.resolve("ok"); }

esercizi

aggiorna il dom in risposta a un click.

const el = document.querySelector("#app");
button.addEventListener("click", () => { el.textContent = "ok"; });

panoramica

In questo capitolo su performance lavoriamo su performance, eventi, arrow functions, async per creare micro-pattern riutilizzabili.

lavora in sequenza: leggi, prova, modifica gli snippet e annota i trade-off principali.

obiettivi

• capire e applicare performance in uno scenario reale
• capire e applicare eventi in uno scenario reale
• capire e applicare arrow functions in uno scenario reale
• capire e applicare async in uno scenario reale

scheda rapida

const debounce = (fn, ms) => {
  let id;
  return (...args) => {
    clearTimeout(id);
    id = setTimeout(() => fn(...args), ms);
  };
};

adatta questo scheletro agli esempi della lezione.

tips

• usa const di default
• separa moduli piccoli
• gestisci errori async
• riduci mutazioni globali
• profilare prima di ottimizzare
• mantieni performance leggibile

mini progetto

aggiorna il dom al click.

• seleziona elemento
• aggiungi evento
• aggiorna

output atteso: ui aggiornata.

checklist

• ho eseguito gli snippet e controllato l'output
• ho annotato almeno 2 trade-off
• ho completato il mini progetto
• ho salvato un riepilogo personale