// --- console.time / timeEnd : chronometrage rapide, sans ouvrir le profiler ---
console.time("traitement");
const resultat = Array.from({ length: 1_000_000 }, (_, i) => i * 2).filter((n) => n % 3 === 0);
console.timeEnd("traitement");     // "traitement: 12.34ms"

// --- Plusieurs chronometres nommes simultanement ---
console.time("etape-1");
console.time("etape-2");
// ... travail ...
console.timeEnd("etape-1");
console.timeEnd("etape-2");

// --- Performance API : mesures precises et exploitables par le Performance panel ---
performance.mark("debut-rendu");
// ... rendu de l'UI ...
performance.mark("fin-rendu");
performance.measure("duree-rendu", "debut-rendu", "fin-rendu");

const mesures = performance.getEntriesByName("duree-rendu");
console.log(mesures[0].duration);      // duree en millisecondes, haute precision

// Ces marks/measures apparaissent DIRECTEMENT dans la timeline du panel Performance de DevTools,
// alignes avec les autres evenements du navigateur (scripting, rendu, peinture).

// --- Nettoyer les entrees de performance accumulees (evite une fuite dans les longues sessions) ---
performance.clearMarks();
performance.clearMeasures();

// --- Lire le flame chart du panel Performance : notions cles ---
// - Chaque barre = un appel de fonction ; sa LARGEUR = temps total passe (self + appels enfants).
// - Une pile de barres empilees verticalement = la profondeur d'appel (call stack) a cet instant.
// - "Self time" (temps propre) = temps passe DANS la fonction, hors appels a d'autres fonctions.
// - "Total time" = self time + temps de TOUTES les fonctions appelees depuis celle-ci.
// - Une barre tres large avec peu d'enfants = souvent LE goulet d'etranglement a optimiser en priorite.
// - Une alternance rouge/jaune signale du travail de rendu (layout, paint) declenche par du JS.

// --- Provoquer volontairement un layout thrashing pour comprendre le probleme ---
function redimensionnementLent(elements) {
    elements.forEach((el) => {
        el.style.width = el.offsetWidth + 10 + "px";     // LECTURE puis ECRITURE, repetee N fois
        // offsetWidth force un "reflow" synchrone a CHAQUE iteration si la precedente a ecrit le style
    });
}

function redimensionnementOptimise(elements) {
    // 1. Toutes les LECTURES d'abord (un seul reflow pour tout le batch)
    const largeurs = elements.map((el) => el.offsetWidth);
    // 2. Toutes les ECRITURES ensuite (un seul repaint)
    elements.forEach((el, i) => {
        el.style.width = largeurs[i] + 10 + "px";
    });
}

// --- PerformanceObserver : detecter les "Long Tasks" (> 50ms, bloquent l'interactivite) ---
const observateur = new PerformanceObserver((liste) => {
    for (const entree of liste.getEntries()) {
        console.warn(`Tache longue detectee : ${entree.duration.toFixed(1)}ms`, entree);
    }
});
observateur.observe({ entryTypes: ["longtask"] });

// --- Mesurer le temps d'un rendu React/Vue avec le Profiler dedie (mention) ---
// React DevTools Profiler et Vue DevTools offrent un flame chart specifique aux COMPOSANTS,
// avec le temps de rendu et de re-render de chaque composant, complementaire au panel Performance.

// --- Memoire : prendre un heap snapshot pour comparer avant/apres une action suspecte ---
// Dans DevTools > Memory > Heap snapshot :
// 1. Prendre un snapshot A
// 2. Effectuer l'action suspectee de fuir (ouvrir/fermer un modal, naviguer, etc.) plusieurs fois
// 3. Forcer un garbage collect (bouton corbeille)
// 4. Prendre un snapshot B et comparer ("Comparison" view) : les objets qui persistent malgre le GC
//    et dont le nombre augmente a chaque iteration revelent une fuite memoire.

// --- User Timing API combinee a des Long Tasks pour un monitoring en PRODUCTION ---
function mesurerFonctionCritique(nom, fonction) {
    return function (...args) {
        performance.mark(`${nom}-debut`);
        const resultat = fonction.apply(this, args);
        performance.mark(`${nom}-fin`);
        performance.measure(nom, `${nom}-debut`, `${nom}-fin`);
        const [mesure] = performance.getEntriesByName(nom);
        if (mesure.duration > 100) {
            // envoyer a un service de monitoring reel (Sentry, Datadog RUM...)
            console.warn(`${nom} anormalement lent : ${mesure.duration.toFixed(0)}ms`);
        }
        return resultat;
    };
}