Gerenciamento de cache no Puppeteer: desabilitação, limpeza e otimização de desempenho
Otimize o desempenho do Puppeteer gerenciando o cache de forma eficaz: desative, limpe e implemente técnicas inteligentes de cache para uma automação mais rápida.
Quer mais rápido Marionetista automação? Gerenciar o cache do navegador é essencial. Este guia aborda como desabilitar, limpar e otimizar o cache para melhor desempenho.
Key Takeaways:
- Desabilitando o Cache: Usar
setCacheEnabled(false)ou sinalizadores de inicialização do navegador como--disable-cachepara simular novos carregamentos de páginas. - Limpar o cache: Usar
Network.clearBrowserCachevia Protocolo Chrome DevTools (CDP) para ambientes de teste limpos. - Cache Inteligente: Reduza a transferência de dados em até 92% com lógica de cache personalizada e armazenamento na memória.
- Aumento de desempenho: Bloqueie recursos desnecessários, como imagens ou anúncios, para acelerar os testes e economizar largura de banda.
O gerenciamento eficiente de cache pode reduzir drasticamente o uso de dados, melhorar a precisão dos testes e acelerar os fluxos de trabalho de automação. Mergulhe para saber como!
Marionetista Tutorial #4 | Iniciar navegador com opções
Desligando o cache no Puppeteer
Desabilitar o cache no Puppeteer pode ser útil para tarefas de teste e automação onde são necessários novos carregamentos de página. Veja como você pode fazer isso e o que ter em mente.
Com o setCacheEnabled() Forma
Você pode desativar o cache no Puppeteer com o setCacheEnabled() método:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);
Execute este comando antes de navegar para qualquer página. Por padrão, o cache está ativado, então você precisa desativá-lo quando seus testes exigirem uma carga limpa de recursos. Para uma solução mais ampla para o navegador, confira a próxima seção.
Sinalizadores de inicialização do navegador para cache
Para desabilitar o cache no nível do navegador, inicie Chromium com sinalizadores específicos:
<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 bem quando você precisa controlar o cache de toda a sessão do navegador, complementando o setCacheEnabled() abordagem.
O que acontece quando você desabilita o cache?
Quando o cache está desligado, todos os recursos são baixados frescos, o que pode tornar as coisas mais lentas e aumentar o uso de dados. Por exemplo, testes em CNNO site mostrou um aumento de 88% na transferência de dados quando o cache foi desabilitado Para encontrar um equilíbrio entre precisão e desempenho, considere estas dicas:
- Use o Chrome DevTools para verificar se o conteúdo da página pode ser armazenado em cache.
- Adicione cache na memória para recursos específicos, se aplicável.
- Desabilite o cache somente quando seu cenário de teste exigir.
- Fique de olho na confiabilidade da rede quando o cache estiver desativado.
Desabilitar o cache é ótimo para simular o comportamento do usuário iniciante, mas pondere as compensações com base nos seus objetivos de teste.
Removendo dados de cache no Puppeteer
Testes automatizados geralmente precisam de um cache limpo para manter resultados consistentes.
Limpando o cache com setCacheEnabled()
Você pode limpar dados de cache usando comandos do Chrome DevTools Protocol (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>);
Essa abordagem limpa o cache do navegador e desabilita o armazenamento em cache, garantindo um novo começo para suas tarefas de automação.
Você também pode limpar o cache e os cookies juntos:
<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>);
Manipulando tipos específicos de armazenamento
Às vezes, você pode precisar limpar dados armazenados específicos em vez de todo o cache. Veja como você pode gerenciar 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);
Isso permite um controle preciso sobre o gerenciamento de cookies durante seus testes.
Gerenciando Cache em Várias Guias
Ao trabalhar com várias abas, é uma boa ideia isolar os dados do cache usando contextos de navegador separados. Veja como:
<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>();
O uso de contextos separados evita a interferência de cache entre as guias, o que o torna ideal para executar testes paralelos.
sbb-itb-23997f1
Configurações de cache para melhor velocidade
Gerenciar o cache de forma eficaz no Puppeteer pode reduzir a transferência de dados em até 92% , tornando a automação muito mais rápida.
Uso de Cache Inteligente
Para equilibrar velocidade e dados atualizados, você pode interceptar solicitações e respostas para implementar um cache mais inteligente. Aqui está um exemplo:
<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 configuração minimiza solicitações de rede desnecessárias, mantendo os dados essenciais atualizados, validando o cache-control cabeçalho.
Construindo regras de cache personalizadas
Adapte o cache às suas necessidades criando regras específicas. Por exemplo:
<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>);
}
};
Essas regras ajudam a determinar quais respostas armazenar em cache e por quanto tempo mantê-las.
Verificando o desempenho do cache
Depois que suas regras de cache estiverem definidas, avalie seu impacto usando métricas de desempenho:
<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>);
}
}
Acompanhe métricas importantes, como total de solicitações, respostas armazenadas em cache e dados salvos. Aqui está uma comparação baseada em testes. :
| Tipo de métrica | Sem Cache | Com Cache | Melhoria |
|---|---|---|---|
| Transferência De Dados | 177 MB | 13.4 MB | Redução de 92% |
Esses resultados destacam como um cache bem projetado pode melhorar drasticamente o desempenho do Puppeteer.
Problemas e soluções comuns
Corrigindo problemas de cache
Ao usar o Puppeteer, habilitar a interceptação de solicitações desabilita o cache nativo do navegador. Isso pode levar a uma maior transferência de dados e tempos de carregamento de página mais lentos. Para resolver isso, você pode implementar o cache personalizado com a seguinte abordagem:
<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 possíveis vazamentos de memória, certifique-se de limpar os recursos de forma eficaz:
<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>();
}
Ao combinar essas técnicas, você pode reduzir a sobrecarga e melhorar o desempenho do Puppeteer.
Dicas de gerenciamento de cache
Aqui estão algumas dicas práticas para gerenciar o cache de forma mais eficaz, com base em testes e análises:
| Questão | Solução | Impacto |
|---|---|---|
| Alta transferência de dados | Usar cache na memória | Reduz o tráfego em até 92% [1] |
| Vazamentos de recursos | Aplicar procedimentos de limpeza | Ajuda a prevenir a exaustão da memória [3] |
| Carregamentos de página lentos | Bloquear recursos desnecessários | Melhora significativamente a velocidade de renderização [2] |
Para melhor desempenho, você pode bloquear certos recursos, como imagens ou folhas de estilo, para acelerar o carregamento da 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>();
}
});
Usar essas estratégias pode otimizar seus fluxos de trabalho do Puppeteer e, ao mesmo tempo, manter o uso de recursos sob controle.
Conclusão
O gerenciamento eficiente de cache no Puppeteer pode melhorar drasticamente o desempenho enquanto reduz o uso de recursos. Este guia abordou como desabilitar, limpar e ajustar as configurações de cache para obter melhores resultados. Abaixo está um resumo conciso das principais estratégias e seus efeitos.
Pontos de resumo
Os testes mostraram o quão eficaz pode ser o gerenciamento adequado do cache , enfatizando a importância de manuseá-lo com cuidado.
Aqui está uma rápida olhada em algumas estratégias principais e seus resultados:
| Estratégia | Implementação | Impacto no desempenho |
|---|---|---|
| Cache na memória | Armazenar em cache as respostas com max-age > 0 | Redução de 92% na transferência de dados [1] |
| Bloqueio de recursos | Desativar anúncios e scripts de rastreamento | Melhoria notável no carregamento da página [2] |
| Tempo de captura de tela inteligente | Use waitForSelector() | Conclusão de renderização mais rápida [2] |
| Cache entre sessões | Configurar userDataDir | Mantém os recursos CSS/JS/imagem [2] |
Dicas importantes para implementação
- Otimização de Ativos: Compactar ativos e otimizar imagens para minimizar cargas úteis HTTP .
- Cronometragem precisa: Faça capturas de tela exatamente quando o conteúdo estiver pronto, evitando atrasos desnecessários .
- Eficiência de memória: Use operações de buffer em vez de gravações no sistema de arquivos para acelerar o processamento .
"Ao otimizar o Puppeteer, lembre-se de que há apenas algumas maneiras de acelerar o desempenho de inicialização/desligamento do próprio Puppeteer. Provavelmente, os maiores ganhos de velocidade virão de obter seu páginas de destino para renderizar mais rápido." - Jon Yongfook, Fundador, Bannerbear
Artigos Relacionados
- Instalando e configurando o Puppeteer: resolvendo problemas comuns de dependência e Chromium
- Dominando a navegação de página com o Puppeteer: uso eficaz de goto e opções de navegação
- Automação de navegador com Puppeteer e JavaScript: implementação prática em Node.js
- Gerenciamento de cookies no Puppeteer: preservação de sessão, emulação de autenticação e limitações
