Gestión de caché en Puppeteer: desactivación, limpieza y optimización del rendimiento

¿Quiere una automatización más rápida con Puppeteer? Gestionar la caché del navegador es clave. Esta guía explica cómo desactivar, borrar y optimizar la caché para mejorar el rendimiento.

Puntos clave:

• Desactivar la caché: Use setCacheEnabled(false) o indicadores de inicio del navegador como --disable-cache para simular cargas de página nuevas.
• Borrar la caché: Use Network.clearBrowserCache mediante Chrome DevTools Protocol (CDP) para contar con entornos de prueba limpios.
• Caché inteligente: Reduzca la transferencia de datos hasta en un 92 % con lógica de caché personalizada y almacenamiento en memoria.
• Mejora del rendimiento: Bloquee recursos innecesarios, como imágenes o anuncios, para acelerar las pruebas y ahorrar ancho de banda.

Una gestión eficiente de la caché puede reducir drásticamente el uso de datos, mejorar la precisión de las pruebas y acelerar los flujos de automatización. ¡Siga leyendo para descubrir cómo hacerlo!

Tutorial de Puppeteer n.º 4 | Iniciar el navegador con opciones

Desactivar la caché en Puppeteer

Desactivar la caché en Puppeteer puede ser útil para tareas de prueba y automatización que requieren cargas de página nuevas. A continuación, verá cómo hacerlo y qué debe tener en cuenta.

Uso del método setCacheEnabled()

Puede desactivar el almacenamiento en caché en Puppeteer con el método setCacheEnabled():

await page.setCacheEnabled(false);

Ejecute este comando antes de navegar a cualquier página. De forma predeterminada, el almacenamiento en caché está activado, por lo que debe desactivarlo cuando sus pruebas requieran una carga limpia de recursos. Para una solución más amplia a nivel de navegador, consulte la siguiente sección.

Indicadores de inicio del navegador para la caché

Para desactivar el almacenamiento en caché a nivel de navegador, inicie Chromium con indicadores específicos:

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

Este método funciona bien cuando necesita controlar el almacenamiento en caché durante toda la sesión del navegador y complementa el enfoque de setCacheEnabled().

¿Qué ocurre al desactivar la caché?

Cuando la caché está desactivada, cada recurso se descarga de nuevo, lo que puede ralentizar el proceso y aumentar el uso de datos. Por ejemplo, las pruebas realizadas en el sitio web de CNN mostraron un aumento del 88 % en la transferencia de datos al desactivar la caché [1]. Para equilibrar precisión y rendimiento, considere estos consejos:

• Use Chrome DevTools para comprobar si el contenido de la página se puede almacenar en caché.
• Añada almacenamiento en caché en memoria para recursos específicos si corresponde.
• Desactive la caché solo cuando su flujo de prueba lo requiera.
• Supervise la fiabilidad de la red cuando la caché esté desactivada.

Desactivar la caché es excelente para simular el comportamiento de un usuario que accede por primera vez, pero valore las ventajas y desventajas según sus objetivos de prueba.

Eliminar datos de caché en Puppeteer

Las pruebas automatizadas suelen necesitar una caché borrada para mantener resultados coherentes.

Borrar la caché con setCacheEnabled()

Puede borrar datos de caché mediante comandos de Chrome DevTools Protocol (CDP):

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

Este enfoque borra la caché del navegador y desactiva el almacenamiento en caché, garantizando un punto de partida limpio para sus tareas de automatización.

También puede borrar la caché y las cookies al mismo tiempo:

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

Gestión de tipos de almacenamiento específicos

En ocasiones, puede necesitar borrar datos almacenados específicos en lugar de toda la caché. A continuación, se muestra cómo puede gestionar las 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);

Esto permite un control preciso de la gestión de cookies durante sus pruebas.

Gestión de la caché en varias pestañas

Al trabajar con varias pestañas, es recomendable aislar los datos de caché mediante contextos de navegador independientes. Así puede hacerlo:

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();

Usar contextos independientes evita interferencias de caché entre pestañas, lo que resulta ideal para ejecutar pruebas en paralelo.

sbb-itb-23997f1

Configuración de caché para mayor velocidad

Gestionar la caché de forma eficaz en Puppeteer puede reducir la transferencia de datos hasta en un 92 % [1], lo que acelera considerablemente la automatización.

Uso inteligente de la caché

Para equilibrar velocidad y datos actualizados, puede interceptar solicitudes y respuestas para implementar un almacenamiento en caché más inteligente. A continuación, se muestra un ejemplo:

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);
    }
}

Esta configuración minimiza las solicitudes de red innecesarias y mantiene actualizados los datos esenciales mediante la validación de la cabecera cache-control.

Creación de reglas de caché personalizadas

Adapte el almacenamiento en caché a sus necesidades creando reglas específicas. Por ejemplo:

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);
    }
};

Estas reglas ayudan a determinar qué respuestas almacenar en caché y durante cuánto tiempo conservarlas.

Comprobación del rendimiento de la caché

Una vez implementadas sus reglas de caché, evalúe su impacto mediante métricas de rendimiento:

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);
    }
}

Supervise métricas clave como las solicitudes totales, las respuestas almacenadas en caché y los datos ahorrados. Esta es una comparación basada en pruebas [1]:

Estos resultados muestran cómo un almacenamiento en caché bien diseñado puede mejorar drásticamente el rendimiento de Puppeteer.

Problemas comunes y soluciones

Solución de problemas de caché

Al usar Puppeteer, activar la interceptación de solicitudes desactiva el almacenamiento en caché nativo del navegador. Esto puede generar una mayor transferencia de datos y tiempos de carga de página más lentos [1]. Para solucionarlo, puede implementar una caché personalizada con el siguiente enfoque:

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()
        });
    }
});

Para evitar posibles fugas de memoria, asegúrese de liberar los recursos eficazmente:

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

Al combinar estas técnicas, puede reducir la sobrecarga y mejorar el rendimiento de Puppeteer.

Consejos para gestionar la caché

Estos son algunos consejos prácticos para gestionar la caché de forma más eficaz, basados en pruebas y análisis:

Para mejorar el rendimiento, puede bloquear determinados recursos, como imágenes u hojas de estilo, para acelerar la carga de la página:

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();
    }
});

Aplicar estas estrategias puede optimizar sus flujos de Puppeteer mientras mantiene bajo control el uso de recursos.

Conclusión

Una gestión eficiente de la caché en Puppeteer puede mejorar drásticamente el rendimiento y reducir el uso de recursos. Esta guía ha explicado cómo desactivar, borrar y ajustar la configuración de caché para lograr mejores resultados. A continuación, encontrará un resumen conciso de las principales estrategias y sus efectos.

Puntos resumidos

Las pruebas han demostrado la eficacia de una gestión adecuada de la caché [1], lo que subraya la importancia de administrarla cuidadosamente.

A continuación, se presenta un vistazo rápido a algunas estrategias clave y sus resultados:

Consejos clave de implementación

• Optimización de recursos: Comprima los recursos y optimice las imágenes para minimizar las cargas útiles HTTP [2].
• Sincronización precisa: Tome capturas de pantalla exactamente cuando el contenido esté listo, evitando retrasos innecesarios [2].
• Eficiencia de memoria: Use operaciones de Buffer en lugar de escrituras en el sistema de archivos para acelerar el procesamiento [2].

"Al optimizar Puppeteer, recuerde que solo hay un número limitado de formas de acelerar el rendimiento de inicio y cierre de Puppeteer. Lo más probable es que las mayores mejoras de velocidad procedan de lograr que sus páginas objetivo se rendericen más rápido." - Jon Yongfook, fundador de Bannerbear [2]