Gerenciamento de Cache no Puppeteer: Desativação, Limpeza e Otimização de Desempenho

Quer uma automação mais rápida com Puppeteer? Gerenciar o cache do navegador é essencial. Este guia mostra como desativar, limpar e otimizar o cache para obter melhor desempenho.

Principais conclusões:

• Desativar o cache: use setCacheEnabled(false) ou flags de inicialização do navegador, como --disable-cache, para simular carregamentos de página sem dados em cache.
• Limpar o cache: use Network.clearBrowserCache por meio do Chrome DevTools Protocol (CDP) para criar ambientes de teste limpos.
• Cache inteligente: reduza a transferência de dados em até 92% com lógica de cache personalizada e armazenamento em memória.
• Ganho 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 fluxos de automação. Continue lendo para saber como!

Tutorial de Puppeteer nº 4 | Inicie o navegador com opções

Desativando o cache no Puppeteer

Desativar o cache no Puppeteer pode ser útil para tarefas de teste e automação que exigem carregamentos de página sem dados em cache. Veja como fazer isso e o que considerar.

Usando o método setCacheEnabled()

Você pode desativar o cache no Puppeteer com o método setCacheEnabled():

await page.setCacheEnabled(false);

Execute esse comando antes de navegar para qualquer página. Por padrão, o cache fica ativado, então você precisa desativá-lo quando seus testes exigirem um carregamento limpo dos recursos. Para uma solução mais abrangente no navegador, confira a próxima seção.

Flags de inicialização do navegador para cache

Para desativar o cache no nível do navegador, inicie o Chromium com flags específicas:

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

Esse método funciona bem quando você precisa controlar o cache durante toda a sessão do navegador, complementando a abordagem com setCacheEnabled().

O que acontece quando você desativa o cache?

Quando o cache está desativado, todos os recursos são baixados novamente, o que pode deixar tudo mais lento e aumentar o uso de dados. Por exemplo, testes no site da CNN mostraram um aumento de 88% na transferência de dados quando o cache foi desativado [1]. Para equilibrar 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 em memória para recursos específicos, quando aplicável.
• Desative o cache apenas quando seu fluxo de teste exigir isso.
• Monitore a confiabilidade da rede quando o cache estiver desativado.

Desativar o cache é ótimo para simular o comportamento de usuários de primeira viagem, mas avalie as compensações com base nos objetivos dos seus testes.

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):

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

Essa abordagem limpa o cache do navegador e desativa o armazenamento em cache, garantindo uma base limpa para suas tarefas de automação.

Você também pode limpar o cache e os cookies ao mesmo tempo:

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

Lidando com tipos específicos de armazenamento

Às vezes, você pode precisar limpar dados específicos armazenados em vez de todo o cache. Veja como gerenciar 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);

Isso permite controlar com precisão o gerenciamento de cookies durante seus testes.

Gerenciando o cache em várias abas

Ao trabalhar com várias abas, é uma boa ideia isolar os dados de cache usando contextos de navegador separados. Veja como:

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 separados evita interferências de cache entre abas, o que é ideal para executar testes em paralelo.

sbb-itb-23997f1

Configurações de cache para mais velocidade

Gerenciar o cache de forma eficaz no Puppeteer pode reduzir a transferência de dados em até 92% [1], tornando a automação muito mais rápida.

Uso inteligente de cache

Para equilibrar velocidade e dados atualizados, você pode interceptar solicitações e respostas para implementar um cache mais inteligente. Veja um exemplo:

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

Essa configuração minimiza solicitações de rede desnecessárias, mantendo dados essenciais atualizados ao validar o cabeçalho cache-control.

Criando regras de cache personalizadas

Adapte o cache às suas necessidades criando regras específicas. Por exemplo:

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

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 configuradas, avalie o impacto delas usando métricas de desempenho:

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

Acompanhe métricas importantes, como o total de solicitações, as respostas em cache e os dados economizados. Veja uma comparação baseada em testes [1]:

Esses resultados destacam como um cache bem projetado pode melhorar drasticamente o desempenho do Puppeteer.

Problemas comuns e soluções

Corrigindo problemas de cache

Ao usar o Puppeteer, ativar a interceptação de solicitações desativa o cache nativo do navegador. Isso pode aumentar a transferência de dados e tornar o carregamento das páginas mais lento [1]. Para resolver isso, você pode implementar um cache personalizado com a seguinte abordagem:

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 possíveis vazamentos de memória, limpe os recursos de forma eficaz:

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

Ao combinar essas técnicas, você pode reduzir a sobrecarga e melhorar o desempenho do Puppeteer.

Dicas de gerenciamento de cache

Veja algumas dicas práticas para gerenciar o cache com mais eficácia, com base em testes e análises:

Para obter melhor desempenho, você pode bloquear determinados recursos, como imagens ou folhas de estilo, para acelerar o carregamento das páginas:

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

Usar essas estratégias pode otimizar seus fluxos 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 e reduzir o uso de recursos. Este guia abordou como desativar, 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 principais

Os testes mostraram como o gerenciamento adequado de cache pode ser eficaz [1], reforçando a importância de lidar com ele com cuidado.

Veja rapidamente algumas estratégias importantes e seus resultados:

Dicas principais de implementação

• Otimização de recursos: compacte recursos e otimize imagens para minimizar as cargas HTTP [2].
• Tempo preciso: faça capturas de tela exatamente quando o conteúdo estiver pronto, evitando atrasos desnecessários [2].
• Eficiência de memória: use operações de Buffer em vez de gravações no sistema de arquivos para acelerar o processamento [2].

"Ao otimizar o Puppeteer, lembre-se de que há apenas algumas formas de acelerar o desempenho de inicialização/encerramento do próprio Puppeteer. Muito provavelmente, os maiores ganhos de velocidade virão de fazer com que suas páginas-alvo sejam renderizadas mais rapidamente." - Jon Yongfook, Fundador, Bannerbear [2]