Mission

Mission : traquer un coût caché derrière un self time faible

Interpréter un flame chart où le JS mesuré n'explique pas la lenteur réelle, puis corriger un layout thrashing.

Contexte

Un développeur mesure mettreAJourListe(elements) avec console.time/timeEnd et obtient 180ms. En ouvrant le panel Performance des DevTools, il voit que les barres "Recalculate Style" et "Layout" représentent 90% de la largeur totale, alors que le "self time" de sa propre fonction JS n'est que de 5ms. Le code incriminé :

function mettreAJourListe(elements) {
    elements.forEach((el) => {
        el.style.height = el.offsetHeight + 5 + "px";
    });
}