Administración de caché en Puppeteer: Desactivación, borrado y optimización del rendimiento

¿Quieres más rápido? Titiritero ¿automatización? Gestionar la caché del navegador es fundamental. Esta guía explica cómo deshabilitarla, borrarla y optimizarla para un mejor rendimiento.

Puntos clave:

• Deshabilitar la caché: Utiliza setCacheEnabled(false) o indicadores de inicio del navegador como --disable-cache para simular cargas de páginas nuevas.
• Borrar caché: Utiliza Network.clearBrowserCache vía Protocolo de Chrome DevTools (CDP) para entornos de prueba limpios.
• almacenamiento en caché inteligente:Reduzca la transferencia de datos hasta en un 92% con lógica de almacenamiento en caché personalizada y almacenamiento en memoria.
• Mejora del rendimiento:Bloquea 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 agilizar los flujos de trabajo de automatización. ¡Descubre cómo!

Titiritero Tutorial n.° 4 | Iniciar el navegador con opciones

Desactivar la caché en Puppeteer

Deshabilitar la caché en Puppeteer puede ser útil para tareas de prueba y automatización que requieren la carga de páginas nuevas. Aquí te explicamos cómo hacerlo y qué debes tener en cuenta.

Usando el setCacheEnabled() Método

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

await page.setCacheEnabled(false);

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

Indicadores de inicio del navegador para la caché

Para deshabilitar el almacenamiento en caché a nivel del navegador, inicie Chromium con banderas específicas:

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

Este método funciona bien cuando necesita controlar el almacenamiento en caché para toda la sesión del navegador, complementando el setCacheEnabled() enfoque.

¿Qué sucede cuando se deshabilita la caché?

Cuando la caché está desactivada, todos los recursos se descargan desde cero, lo que puede ralentizar el proceso y aumentar el uso de datos. Por ejemplo, las pruebas en CNNEl sitio web de mostró un aumento del 88 % en la transferencia de datos al deshabilitar el almacenamiento en caché. Para lograr un equilibrio entre precisión y rendimiento, considere estos consejos:

• Utilice Chrome DevTools para comprobar si el contenido de la página se puede almacenar en caché.
• Agregue almacenamiento en caché en memoria para recursos específicos si corresponde.
• Deshabilite el caché solo cuando su escenario de prueba lo requiera.
• Vigile la confiabilidad de la red cuando el caché esté desactivado.

Deshabilitar el caché es excelente para simular el comportamiento del usuario primerizo, pero evalúe las desventajas en función de sus objetivos de prueba.

Eliminar datos de caché en Puppeteer

Las pruebas automatizadas a menudo necesitan un caché borrado para mantener resultados consistentes.

Borrar la caché con setCacheEnabled()

Puede borrar los datos de caché mediante los comandos del Protocolo de herramientas de desarrollo de Chrome (CDP):

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

Este enfoque borra la memoria caché del navegador y deshabilita el almacenamiento en caché, lo que garantiza un borrón y cuenta nueva para sus tareas de automatización.

También puedes borrar el caché y las cookies a la vez:

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

Manejo de tipos de almacenamiento específicos

A veces, puede que necesites borrar datos específicos almacenados en lugar de toda la caché. Así puedes 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 sobre la gestión de cookies durante sus pruebas.

Administrar la caché en varias pestañas

Al trabajar con varias pestañas, conviene aislar los datos de la caché mediante contextos de navegador independientes. A continuación, se explica cómo:

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

El uso de contextos separados evita la interferencia de caché entre pestañas, lo que lo hace ideal para ejecutar pruebas paralelas.

sbb-itb-23997f1

Configuración de caché para una mejor velocidad

Administrar la caché de manera eficaz en Puppeteer puede reducir la transferencia de datos hasta en un 92%, haciendo que la automatización sea mucho más rápida.

Uso inteligente de caché

Para equilibrar la velocidad y la actualización de los datos, puede interceptar solicitudes y respuestas para implementar un almacenamiento en caché más inteligente. A continuación, 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 al mismo tiempo mantiene actualizados los datos esenciales mediante la validación de la cache-control cabecera.

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 que sus reglas de almacenamiento en caché estén implementadas, evalúe su impacto utilizando 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);
    }
}

Monitorea métricas clave como el total de solicitudes, las respuestas en caché y los datos guardados. Aquí tienes una comparación basada en pruebas:

Estos resultados resaltan 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, habilitar la interceptación de solicitudes deshabilita el almacenamiento en caché nativo del navegador. Esto puede provocar una mayor transferencia de datos y tiempos de carga de página más lentos. Para solucionar esto, puede implementar un almacenamiento en caché personalizado 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 limpiar los recursos de manera efectiva:

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 los gastos generales y mejorar el rendimiento de Puppeteer.

Consejos para la gestión de caché

A continuación se ofrecen algunos consejos prácticos para gestionar la caché de forma más eficaz, basados ​​en pruebas y análisis:

Para un mejor rendimiento, puede bloquear ciertos 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();
    }
});

El uso de estas estrategias puede optimizar los flujos de trabajo de Puppeteer y, al mismo tiempo, mantener el uso de recursos bajo control.

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 explica cómo deshabilitar, borrar y ajustar la configuración de la caché para obtener mejores resultados. A continuación, se presenta un breve resumen de las principales estrategias y sus efectos.

Puntos de resumen

Las pruebas han demostrado lo efectiva que puede ser la gestión adecuada de la memoria caché, destacando la importancia de manejarla con cuidado.

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

Consejos clave de implementación

• Optimización de activos:Comprima activos y optimice imágenes para minimizar las cargas útiles HTTP.
• Tiempo preciso:Tome capturas de pantalla exactamente cuando el contenido esté listo, evitando retrasos innecesarios.
• Eficiencia de la memoria:Utilice operaciones de búfer en lugar de escrituras en el sistema de archivos para acelerar el procesamiento.

"Al optimizar Puppeteer, recuerde que solo hay un número limitado de formas de acelerar el rendimiento de inicio/apagado de Puppeteer. Lo más probable es que las mayores ganancias de velocidad provengan de obtener su páginas de destino para renderizar más rápido." - Jon Yongfook, fundador de Bannerbear

Artículos relacionados con

• Instalación y configuración de Puppeteer: Solución de problemas comunes de dependencias y Chromium
• Dominar la navegación de páginas con Puppeteer: Uso eficaz de las opciones de navegación y de acceso directo
• Automatización del navegador con Puppeteer y JavaScript: Implementación práctica en Node.js
• Gestión de cookies en Puppeteer: conservación de sesiones, emulación de autenticación y limitaciones