Documentation - Performance.

Pour éviter tout "flash" visuel (FOUC), Marssel identifie et génère en priorité les styles des éléments "critiques" de votre page (comme le header, la navigation, ou le footer).

Cette fonctionnalité (gérée par `getCriticalElements` et `processCriticalElements`) utilise une liste prédéfinie de sélecteurs header, nav, [role="navigation"] .no-lazy) pour trouver ces éléments et injecter leurs styles de manière synchrone avant le reste de la page.

Cela garantit que la structure principale de votre site est stylisée immédiatement au chargement, offrant une meilleure expérience utilisateur (LCP). La configuration des sélecteurs critiques se fait au moment de l'initialisation de Marssel.

Pour les pages très longues, il n'est pas nécessaire de générer les styles pour les éléments qui sont hors du champ de vision.

Lorsque l'option lazyload: true est activée lors de la configuration, Marssel utilise un `IntersectionObserver` pour ne traiter les classes Marssel d'un élément que lorsque celui-ci s'approche de la fenêtre d'affichage.

Cela réduit considérablement la taille de la feuille de style initiale et le temps de traitement au chargement de la page, améliorant le Time to Interactive (TTI).

// Exemple d'initialisation (conceptuel)
new Marssel({
    lazyload: true,
    criticalsSelectors: ["header", "footer", ".nav-main"]
});

Marssel implémente un système de cache intelligent qui accélère considérablement les chargements de pages suivants, particulièrement efficace lors de la navigation entre pages ou du refresh d'une même page.

Fonctionnement

Le cache sauvegarde automatiquement dans sessionStorage :

• Les règles CSS générées
• La map des sélecteurs et déclarations
• La liste des classes déjà traitées

Au chargement d'une nouvelle page (ou refresh), Marssel restaure instantanément ces données depuis le cache plutôt que de les régénérer, réduisant drastiquement le temps de traitement initial.

Compatibilité avec le Lazyload

Le cache est conçu pour fonctionner en harmonie avec le lazyload :

• Sans lazyload : Tous les styles de la page sont mis en cache
• Avec lazyload : Seules les classes déjà chargées (visibles) sont mises en cache

Vérification et Debug

Vous pouvez vérifier le fonctionnement du cache via la console :

// Vérifier le contenu du cache
window.debugCache = () => {
    const cache = sessionStorage.getItem('marssel_styles_cache');
    if (cache) {
        const parsed = JSON.parse(cache);
        console.log('📦 Cache trouvé:', {
            version: parsed.version,
            timestamp: new Date(parsed.timestamp).toLocaleString(),
            cssLength: parsed.css.length + ' caractères',
            classesCount: parsed.loadedClasses.length + ' classes',
            selectorsCount: Object.keys(parsed.selectorMap).length
        });

        // Voir les classes en cache
        console.log('Classes:', parsed.loadedClasses);
    } else {
        console.log('❌ Aucun cache trouvé');
    }
};

// Nettoyer le cache manuellement
window.marssel.clearStyleCache();

// Vérifier les classes actuellement chargées
console.log(window.marssel.styleManager.loadedClasses);

Invalidation automatique du cache

Le cache est automatiquement invalidé dans les cas suivants :

• Changement de HTML : Si les classes dans le DOM ont été modifiées (ajout, suppression, modification), le cache est automatiquement invalidé
• Changement de version : Le cache est invalidé lors d'une mise à jour de Marssel
• Fermeture du navigateur : Le cache utilise sessionStorage et est supprimé automatiquement

Limitations

• Stockage : sessionStorage (≈5MB par domaine)
• Performance : La vérification du hash ajoute ~1-2ms au chargement initial (négligeable)