⚡ Interactions Rapides
Cliquez sur les boutons - ils répondent tous en moins de 50ms !
📜 Scroll optimisé (passive + throttle)
Scrollez - le handler utilise passive: true et un throttle de 100ms
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
⌨️ Saisie avec debounce (300ms)
Tapez rapidement - le traitement ne se fait qu'après 300ms d'inactivité
✅ Techniques pour un bon INP
- Feedback visuel immédiat : Changer l'UI avant le travail lourd
- requestIdleCallback : Différer le travail non urgent
- Web Workers : Exécuter les calculs lourds hors du thread principal
- Chunked processing : Diviser le travail avec
scheduler.yield() - Debounce/Throttle : Limiter la fréquence des handlers
- passive: true : Pour les listeners scroll/touch
Comparaison des approches
❌ Mauvais (bloque le thread)
button.onclick = () => {
// Bloque le thread pendant 1s
while (Date.now() - start < 1000) {
Math.random();
}
updateUI();
}; ✅ Bon (feedback immédiat)
button.onclick = () => {
// Feedback immédiat
button.textContent = "Chargement...";
// Travail différé
requestIdleCallback(() => {
doHeavyWork();
updateUI();
});
};