Administración de caché en Puppeteer: Desactivación, borrado y optimización del rendimiento
Optimice el rendimiento de Puppeteer administrando eficazmente el caché: deshabilite, borre e implemente técnicas de almacenamiento en caché inteligente para una automatización más rápida.
¿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é: Utilice
setCacheEnabled(false)o indicadores de inicio del navegador como--disable-cachepara simular cargas de páginas nuevas. - Borrar caché: Utilice
Network.clearBrowserCacheví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:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);
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:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--disable-cache'</span>]
});
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 cuando el almacenamiento en caché estaba deshabilitado. [ 1 ]Para lograr un equilibrio entre precisión y rendimiento, tenga en cuenta 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):
<span class="hljs-keyword">const</span> client = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">target</span>().<span class="hljs-title function_">createCDPSession</span>();
<span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.clearBrowserCache'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);
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:
<span class="hljs-keyword">const</span> client = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">target</span>().<span class="hljs-title function_">createCDPSession</span>();
<span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.clearBrowserCache'</span>);
<span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.clearBrowserCookies'</span>);
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:
<span class="hljs-comment">// Clear all cookies</span>
<span class="hljs-keyword">const</span> cookies = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">cookies</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">deleteCookie</span>(...cookies);
<span class="hljs-comment">// To delete a specific cookie, use:</span>
<span class="hljs-comment">// await page.deleteCookie({ name: 'cookie_name', url: 'https://example.com' });</span>
<span class="hljs-comment">// Set cookies to expire</span>
<span class="hljs-keyword">const</span> cookies = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">cookies</span>();
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> cookie <span class="hljs-keyword">of</span> cookies) {
cookie.<span class="hljs-property">expires</span> = -<span class="hljs-number">1</span>;
}
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCookies</span>(...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:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> context = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">createIncognitoBrowserContext</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> context.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">const</span> client = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">target</span>().<span class="hljs-title function_">createCDPSession</span>();
<span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.clearBrowserCache'</span>);
<span class="hljs-comment">// Close the context after tasks are done</span>
<span class="hljs-keyword">await</span> context.<span class="hljs-title function_">close</span>();
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% [ 1 ], 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:
<span class="hljs-keyword">const</span> cache = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>();
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">handleRequest</span>(<span class="hljs-params">request</span>) {
<span class="hljs-keyword">const</span> url = request.<span class="hljs-title function_">url</span>();
<span class="hljs-keyword">if</span> (cache.<span class="hljs-title function_">has</span>(url)) {
<span class="hljs-keyword">const</span> cachedResponse = cache.<span class="hljs-title function_">get</span>(url);
<span class="hljs-keyword">if</span> (<span class="hljs-title function_">isFresh</span>(cachedResponse)) {
<span class="hljs-keyword">return</span> request.<span class="hljs-title function_">respond</span>(cachedResponse);
}
}
<span class="hljs-comment">// Continue the request if it's not cached</span>
request.<span class="hljs-title function_">continue</span>();
}
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">handleResponse</span>(<span class="hljs-params">response</span>) {
<span class="hljs-keyword">const</span> headers = response.<span class="hljs-title function_">headers</span>();
<span class="hljs-keyword">if</span> (headers[<span class="hljs-string">'cache-control'</span>] && headers[<span class="hljs-string">'cache-control'</span>].<span class="hljs-title function_">includes</span>(<span class="hljs-string">'max-age'</span>)) {
<span class="hljs-keyword">const</span> responseData = {
<span class="hljs-attr">status</span>: response.<span class="hljs-title function_">status</span>(),
<span class="hljs-attr">headers</span>: headers,
<span class="hljs-attr">body</span>: <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">buffer</span>()
};
cache.<span class="hljs-title function_">set</span>(response.<span class="hljs-title function_">url</span>(), 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:
<span class="hljs-keyword">const</span> customCacheRules = {
<span class="hljs-attr">shouldCache</span>: <span class="hljs-function">(<span class="hljs-params">response</span>) =></span> {
<span class="hljs-keyword">const</span> headers = response.<span class="hljs-title function_">headers</span>();
<span class="hljs-keyword">return</span> headers[<span class="hljs-string">'cache-control'</span>] &&
headers[<span class="hljs-string">'cache-control'</span>].<span class="hljs-title function_">includes</span>(<span class="hljs-string">'max-age'</span>) &&
<span class="hljs-title class_">Number</span>(headers[<span class="hljs-string">'cache-control'</span>].<span class="hljs-title function_">match</span>(<span class="hljs-regexp">/max-age=(\d+)/</span>)[<span class="hljs-number">1</span>]) > <span class="hljs-number">0</span>;
},
<span class="hljs-attr">getExpirationTime</span>: <span class="hljs-function">(<span class="hljs-params">headers</span>) =></span> {
<span class="hljs-keyword">const</span> maxAge = headers[<span class="hljs-string">'cache-control'</span>].<span class="hljs-title function_">match</span>(<span class="hljs-regexp">/max-age=(\d+)/</span>)[<span class="hljs-number">1</span>];
<span class="hljs-keyword">return</span> <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>() + (<span class="hljs-built_in">parseInt</span>(maxAge) * <span class="hljs-number">1000</span>);
}
};
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:
<span class="hljs-keyword">const</span> metrics = {
<span class="hljs-attr">totalRequests</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">cachedResponses</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">dataSaved</span>: <span class="hljs-number">0</span>
};
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">trackCacheMetrics</span>(<span class="hljs-params">request, response</span>) {
metrics.<span class="hljs-property">totalRequests</span>++;
<span class="hljs-keyword">if</span> (response.<span class="hljs-title function_">fromCache</span>()) {
metrics.<span class="hljs-property">cachedResponses</span>++;
metrics.<span class="hljs-property">dataSaved</span> += <span class="hljs-built_in">parseInt</span>(response.<span class="hljs-title function_">headers</span>()[<span class="hljs-string">'content-length'</span>] || <span class="hljs-number">0</span>);
}
}
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. [ 1 ]:
| Tipo de métrica | Sin caché | Con caché | Mejoramiento |
|---|---|---|---|
| Transferencia de datos | 177 MB | 13.4 MB | reducción de un 92% |
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. [ 1 ]Para solucionar esto, puede implementar un almacenamiento en caché personalizado con el siguiente enfoque:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Initialize cache storage</span>
<span class="hljs-keyword">const</span> responseCache = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-keyword">async</span> request => {
<span class="hljs-keyword">const</span> url = request.<span class="hljs-title function_">url</span>();
<span class="hljs-keyword">if</span> (responseCache.<span class="hljs-title function_">has</span>(url)) {
<span class="hljs-keyword">await</span> request.<span class="hljs-title function_">respond</span>(responseCache.<span class="hljs-title function_">get</span>(url));
<span class="hljs-keyword">return</span>;
}
request.<span class="hljs-title function_">continue</span>();
});
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
<span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
<span class="hljs-keyword">const</span> headers = response.<span class="hljs-title function_">headers</span>();
<span class="hljs-keyword">if</span> (headers[<span class="hljs-string">'cache-control'</span>] && headers[<span class="hljs-string">'cache-control'</span>].<span class="hljs-title function_">includes</span>(<span class="hljs-string">'max-age'</span>)) {
responseCache.<span class="hljs-title function_">set</span>(url, {
<span class="hljs-attr">status</span>: response.<span class="hljs-title function_">status</span>(),
<span class="hljs-attr">headers</span>: headers,
<span class="hljs-attr">body</span>: <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">buffer</span>()
});
}
});
Para evitar posibles fugas de memoria, asegúrese de limpiar los recursos de manera efectiva:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">cleanupResources</span>(<span class="hljs-params">page</span>) {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">removeAllListeners</span>();
<span class="hljs-keyword">const</span> client = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">target</span>().<span class="hljs-title function_">createCDPSession</span>();
<span class="hljs-keyword">await</span> client.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.clearBrowserCache'</span>);
<span class="hljs-keyword">await</span> client.<span class="hljs-title function_">detach</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">close</span>();
}
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:
| Problema | Solución: | Impacto |
|---|---|---|
| Alta transferencia de datos | Utilice el almacenamiento en caché en memoria | Reduce el tráfico hasta en un 92% [1] |
| Fugas de recursos | Aplicar procedimientos de limpieza | Ayuda a prevenir el agotamiento de la memoria [3] |
| Cargas de página lentas | Bloquear recursos innecesarios | Mejora significativamente la velocidad de renderizado [2] |
Para un mejor rendimiento, puede bloquear ciertos recursos como imágenes u hojas de estilo para acelerar la carga de la página:
<span class="hljs-keyword">const</span> browserOptions = {
<span class="hljs-attr">userDataDir</span>: <span class="hljs-string">'./cache-directory'</span>,
<span class="hljs-attr">args</span>: [
<span class="hljs-string">'--disable-background-timer-throttling'</span>,
<span class="hljs-string">'--disable-extensions'</span>
]
};
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'image'</span> || request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'stylesheet'</span>) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
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 eficaz que puede ser una gestión adecuada de la caché [ 1 ], enfatizando la importancia de manejarlo con cuidado.
A continuación presentamos un vistazo rápido a algunas estrategias clave y sus resultados:
| Estrategia | Implementación | Impacto en el rendimiento |
|---|---|---|
| Almacenamiento en caché en memoria | Respuestas de caché con edad máxima > 0 | Reducción del 92% en la transferencia de datos [1] |
| Bloqueo de recursos | Deshabilitar anuncios y scripts de seguimiento | Mejora notable en la carga de la página [2] |
| Sincronización inteligente de capturas de pantalla | Utilice waitForSelector() | Finalización de renderizado más rápida [2] |
| Almacenamiento en caché entre sesiones | Configurar userDataDir | Conserva los recursos CSS/JS/imagen [2] |
Consejos clave de implementación
- Optimización de activos:Comprima activos y optimice imágenes para minimizar las cargas útiles HTTP [ 2 ].
- Tiempo preciso:Tome capturas de pantalla exactamente cuando el contenido esté listo, evitando retrasos innecesarios [ 2 ].
- Eficiencia de la memoria: Utilice operaciones de búfer 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/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 [ 2 ]
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
