Gestion du cache dans Puppeteer : désactivation, suppression et optimisation des performances

Vous souhaitez accélérer l’automatisation avec Puppeteer ? La gestion du cache du navigateur est essentielle. Ce guide explique comment désactiver, vider et optimiser le cache pour améliorer les performances.

Points clés :

• Désactivation du cache : utilisez setCacheEnabled(false) ou des indicateurs de lancement du navigateur tels que --disable-cache pour simuler des chargements de page sans données en cache.
• Nettoyage du cache : utilisez Network.clearBrowserCache via le Chrome DevTools Protocol (CDP) afin d’obtenir des environnements de test propres.
• Mise en cache intelligente : réduisez les transferts de données jusqu’à 92 % grâce à une logique de mise en cache personnalisée et au stockage en mémoire.
• Gain de performances : bloquez les ressources inutiles, comme les images ou les publicités, pour accélérer les tests et économiser de la bande passante.

Une gestion efficace du cache peut réduire considérablement l’utilisation des données, améliorer la précision des tests et accélérer les workflows d’automatisation. Découvrez comment faire !

Tutoriel Puppeteer n°4 | Lancer le navigateur avec des options

Désactiver le cache dans Puppeteer

Désactiver le cache dans Puppeteer peut être utile pour les tests et les tâches d’automatisation qui nécessitent des chargements de page sans données en cache. Voici comment procéder et les points à garder à l’esprit.

Utiliser la méthode setCacheEnabled()

Vous pouvez désactiver la mise en cache dans Puppeteer avec la méthode setCacheEnabled() :

await page.setCacheEnabled(false);

Exécutez cette commande avant d’accéder à une page. Par défaut, la mise en cache est activée ; vous devez donc la désactiver lorsque vos tests exigent un chargement propre des ressources. Pour une solution applicable à l’ensemble du navigateur, consultez la section suivante.

Indicateurs de lancement du navigateur pour le cache

Pour désactiver la mise en cache au niveau du navigateur, lancez Chromium avec des indicateurs spécifiques :

const browser = await puppeteer.launch({
    args: ['--disable-cache']
});

Cette méthode est efficace lorsque vous devez contrôler la mise en cache pour toute la session du navigateur, en complément de l’approche setCacheEnabled().

Que se passe-t-il lorsque vous désactivez le cache ?

Lorsque le cache est désactivé, chaque ressource est téléchargée à nouveau, ce qui peut ralentir les opérations et augmenter l’utilisation des données. Par exemple, des tests réalisés sur le site de CNN ont montré une hausse de 88 % du transfert de données lorsque la mise en cache était désactivée [1]. Pour trouver le bon équilibre entre précision et performances, tenez compte des conseils suivants :

• Utilisez Chrome DevTools pour vérifier si le contenu de la page peut être mis en cache.
• Ajoutez une mise en cache en mémoire pour des ressources spécifiques lorsque cela est pertinent.
• Désactivez le cache uniquement lorsque votre cas de test l’exige.
• Surveillez la fiabilité du réseau lorsque le cache est désactivé.

Désactiver le cache est idéal pour simuler le comportement d’un utilisateur qui visite un site pour la première fois, mais évaluez les compromis selon vos objectifs de test.

Supprimer les données de cache dans Puppeteer

Les tests automatisés nécessitent souvent un cache vidé afin de maintenir des résultats cohérents.

Vider le cache avec setCacheEnabled()

Vous pouvez supprimer les données du cache à l’aide des commandes du Chrome DevTools Protocol (CDP) :

const client = await page.target().createCDPSession();
await client.send('Network.clearBrowserCache');
await page.setCacheEnabled(false);

Cette approche vide le cache du navigateur et désactive la mise en cache, garantissant un environnement propre pour vos tâches d’automatisation.

Vous pouvez également vider le cache et les cookies simultanément :

const client = await page.target().createCDPSession();
await client.send('Network.clearBrowserCache');
await client.send('Network.clearBrowserCookies');

Gérer des types de stockage spécifiques

Il peut parfois être nécessaire de supprimer des données stockées spécifiques plutôt que l’ensemble du cache. Voici comment gérer les cookies :

// Clear all cookies
const cookies = await page.cookies();
await page.deleteCookie(...cookies);

// To delete a specific cookie, use:
// await page.deleteCookie({ name: 'cookie_name', url: 'https://example.com' });

// Set cookies to expire
const cookies = await page.cookies();
for (let cookie of cookies) {
    cookie.expires = -1;
}
await page.setCookies(...cookies);

Cela vous permet de contrôler précisément la gestion des cookies pendant vos tests.

Gérer le cache dans plusieurs onglets

Lorsque vous travaillez avec plusieurs onglets, il est recommandé d’isoler les données de cache en utilisant des contextes de navigateur distincts. Voici comment procéder :

const browser = await puppeteer.launch();
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

const client = await page.target().createCDPSession();
await client.send('Network.clearBrowserCache');

// Close the context after tasks are done
await context.close();

L’utilisation de contextes distincts empêche les interférences de cache entre les onglets, ce qui est idéal pour exécuter des tests en parallèle.

sbb-itb-23997f1

Paramètres de cache pour améliorer la vitesse

Une gestion efficace du cache dans Puppeteer peut réduire les transferts de données jusqu’à 92 % [1], accélérant considérablement l’automatisation.

Utilisation intelligente du cache

Pour équilibrer vitesse et actualisation des données, vous pouvez intercepter les requêtes et les réponses afin de mettre en œuvre une mise en cache plus intelligente. Voici un exemple :

const cache = new Map();

async function handleRequest(request) {
    const url = request.url();
    if (cache.has(url)) {
        const cachedResponse = cache.get(url);
        if (isFresh(cachedResponse)) {
            return request.respond(cachedResponse);
        }
    }

    // Continue the request if it's not cached
    request.continue();
}

async function handleResponse(response) {
    const headers = response.headers();
    if (headers['cache-control'] && headers['cache-control'].includes('max-age')) {
        const responseData = {
            status: response.status(),
            headers: headers,
            body: await response.buffer()
        };
        cache.set(response.url(), responseData);
    }
}

Cette configuration réduit les requêtes réseau inutiles tout en maintenant les données essentielles à jour grâce à la validation de l’en-tête cache-control.

Créer des règles de cache personnalisées

Adaptez la mise en cache à vos besoins en créant des règles spécifiques. Par exemple :

const customCacheRules = {
    shouldCache: (response) => {
        const headers = response.headers();
        return headers['cache-control'] && 
               headers['cache-control'].includes('max-age') &&
               Number(headers['cache-control'].match(/max-age=(\d+)/)[1]) > 0;
    },

    getExpirationTime: (headers) => {
        const maxAge = headers['cache-control'].match(/max-age=(\d+)/)[1];
        return Date.now() + (parseInt(maxAge) * 1000);
    }
};

Ces règles permettent de déterminer quelles réponses mettre en cache et pendant combien de temps les conserver.

Vérifier les performances du cache

Une fois vos règles de cache en place, évaluez leur impact à l’aide de métriques de performance :

const metrics = {
    totalRequests: 0,
    cachedResponses: 0,
    dataSaved: 0
};

async function trackCacheMetrics(request, response) {
    metrics.totalRequests++;
    if (response.fromCache()) {
        metrics.cachedResponses++;
        metrics.dataSaved += parseInt(response.headers()['content-length'] || 0);
    }
}

Suivez les métriques clés telles que le nombre total de requêtes, les réponses mises en cache et les données économisées. Voici une comparaison basée sur des tests [1] :

Ces résultats montrent à quel point une mise en cache bien conçue peut améliorer considérablement les performances de Puppeteer.

Problèmes courants et solutions

Résoudre les problèmes de cache

Dans Puppeteer, l’activation de l’interception des requêtes désactive la mise en cache native du navigateur. Cela peut entraîner une augmentation du transfert de données et un ralentissement du chargement des pages [1]. Pour résoudre ce problème, vous pouvez mettre en œuvre une mise en cache personnalisée avec l’approche suivante :

const browser = await puppeteer.launch();
const page = await browser.newPage();

// Initialize cache storage
const responseCache = new Map();

await page.setRequestInterception(true);
page.on('request', async request => {
    const url = request.url();
    if (responseCache.has(url)) {
        await request.respond(responseCache.get(url));
        return;
    }
    request.continue();
});

page.on('response', async response => {
    const url = response.url();
    const headers = response.headers();

    if (headers['cache-control'] && headers['cache-control'].includes('max-age')) {
        responseCache.set(url, {
            status: response.status(),
            headers: headers,
            body: await response.buffer()
        });
    }
});

Pour éviter les fuites de mémoire potentielles, veillez à libérer efficacement les ressources :

async function cleanupResources(page) {
    await page.removeAllListeners();
    const client = await page.target().createCDPSession();
    await client.send('Network.clearBrowserCache');
    await client.detach();
    await page.close();
}

En combinant ces techniques, vous pouvez réduire la surcharge et améliorer les performances de Puppeteer.

Conseils de gestion du cache

Voici quelques conseils pratiques pour gérer le cache plus efficacement, basés sur des tests et des analyses :

Pour de meilleures performances, vous pouvez bloquer certaines ressources, telles que les images ou les feuilles de style, afin d’accélérer le chargement des pages :

const browserOptions = {
    userDataDir: './cache-directory',
    args: [
        '--disable-background-timer-throttling',
        '--disable-extensions'
    ]
};

await page.setRequestInterception(true);
page.on('request', request => {
    if (request.resourceType() === 'image' || request.resourceType() === 'stylesheet') {
        request.abort();
    } else {
        request.continue();
    }
});

Ces stratégies peuvent fluidifier vos workflows Puppeteer tout en maintenant l’utilisation des ressources sous contrôle.

Conclusion

Une gestion efficace du cache dans Puppeteer peut améliorer considérablement les performances tout en réduisant l’utilisation des ressources. Ce guide a expliqué comment désactiver, vider et ajuster les paramètres de cache afin d’obtenir de meilleurs résultats. Vous trouverez ci-dessous un résumé concis des principales stratégies et de leurs effets.

Points récapitulatifs

Les tests ont démontré l’efficacité d’une gestion appropriée du cache [1], soulignant l’importance de le gérer avec soin.

Voici un aperçu rapide de quelques stratégies clés et de leurs résultats :

Conseils clés de mise en œuvre

• Optimisation des ressources : compressez les ressources et optimisez les images afin de réduire au minimum les charges utiles HTTP [2].
• Timing précis : prenez les captures d’écran exactement lorsque le contenu est prêt, afin d’éviter les délais inutiles [2].
• Efficacité mémoire : utilisez les opérations Buffer au lieu des écritures dans le système de fichiers pour accélérer le traitement [2].

« Lorsque vous optimisez Puppeteer, gardez à l’esprit qu’il n’existe qu’un nombre limité de façons d’accélérer les performances de démarrage et d’arrêt de Puppeteer lui-même. Les gains de vitesse les plus importants viendront probablement de votre capacité à faire afficher plus rapidement vos pages cibles. » — Jon Yongfook, fondateur de Bannerbear [2]