Aller au contenu principal

JavaScript

Progression

#JavaScript: comportements sobres

Ajoutez des comportements progressifs: ne bloquez pas le rendu avec de gros bundles, préférez déférer et scinder. Les handlers doivent être petits et idempotents.

jsjs
1document.querySelector('form')?.addEventListener('submit', (e) => {2  e.preventDefault()3  const email = /** @type {HTMLInputElement} */(document.getElementById('email')).value4  if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {5    announce('Email invalide')6    return7  }8  // Simuler l’envoi au serveur9  setTimeout(() => announce('Email envoyé'), 250)10})11 12function announce(msg) {13  let live = document.getElementById('live')14  if (!live) {

Mini‑exercice: transformez un menu hamburger en composant “disclosure” accessible (ARIA, focus, ESC pour fermer).

#Animation: boucle d’événements (mental model)

Call stack
Exécuter le JS synchrone
Tasks
Timers, I/O, events (macro‑tâches)
Microtasks
Promises/MutationObserver
Render
Reflow/paint si nécessaire

Erreurs fréquentes: bloquer le thread principal avec des boucles lourdes; abuser des micro‑tâches (boucles de Promises) qui affament le rendu; manipuler le DOM à chaque itération plutôt que de batcher. Une règle simple: découpez le travail, laissez le navigateur respirer et mesurez l’impact (Performance panel).