Cache-Management in Puppeteer: Deaktivieren, Leeren und Performance-Optimierung

Möchten Sie Ihre Puppeteer-Automatisierung beschleunigen? Die Verwaltung des Browser-Cache ist entscheidend. Dieser Leitfaden zeigt Ihnen, wie Sie den Cache deaktivieren, leeren und optimieren, um die Performance zu steigern.

Wichtigste Erkenntnisse:

• Cache deaktivieren: Verwenden Sie setCacheEnabled(false) oder Browser-Start-Flags wie --disable-cache, um neue Seitenladevorgänge zu simulieren.
• Cache leeren: Nutzen Sie Network.clearBrowserCache über das Chrome DevTools Protocol (CDP), um saubere Testumgebungen zu schaffen.
• Intelligentes Caching: Reduzieren Sie die Datenübertragung mit individueller Caching-Logik und In-Memory-Speicherung um bis zu 92 %.
• Performance-Boost: Blockieren Sie unnötige Ressourcen wie Bilder oder Werbung, um Tests zu beschleunigen und Bandbreite zu sparen.

Eine effiziente Cache-Verwaltung kann den Datenverbrauch erheblich reduzieren, die Testgenauigkeit verbessern und Automatisierungs-Workflows beschleunigen. Lesen Sie weiter und erfahren Sie mehr!

Puppeteer-Tutorial Nr. 4 | Browser mit Optionen starten

Cache in Puppeteer deaktivieren

Das Deaktivieren des Cache in Puppeteer kann für Test- und Automatisierungsaufgaben hilfreich sein, bei denen neue Seitenladevorgänge erforderlich sind. So geht es und das sollten Sie beachten.

Die Methode setCacheEnabled() verwenden

Mit der Methode setCacheEnabled() können Sie das Caching in Puppeteer deaktivieren:

await page.setCacheEnabled(false);

Führen Sie diesen Befehl aus, bevor Sie zu einer Seite navigieren. Standardmäßig ist das Caching aktiviert. Sie müssen es daher deaktivieren, wenn Ihre Tests einen sauberen Ladevorgang der Ressourcen erfordern. Eine browserweite Lösung finden Sie im nächsten Abschnitt.

Browser-Start-Flags für den Cache

Um Caching auf Browser-Ebene zu deaktivieren, starten Sie Chromium mit bestimmten Flags:

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

Diese Methode eignet sich gut, wenn Sie das Caching für die gesamte Browser-Sitzung steuern müssen, und ergänzt den Ansatz mit setCacheEnabled().

Was passiert, wenn Sie den Cache deaktivieren?

Wenn der Cache deaktiviert ist, wird jede Ressource neu heruntergeladen. Das kann Prozesse verlangsamen und den Datenverbrauch erhöhen. Tests auf der Website von CNN zeigten beispielsweise einen Anstieg der Datenübertragung um 88 %, wenn das Caching deaktiviert war [1]. Berücksichtigen Sie diese Tipps, um ein Gleichgewicht zwischen Genauigkeit und Performance zu finden:

• Verwenden Sie Chrome DevTools, um zu prüfen, ob Seiteninhalte cachebar sind.
• Ergänzen Sie bei Bedarf In-Memory-Caching für bestimmte Ressourcen.
• Deaktivieren Sie den Cache nur, wenn Ihr Test-Workflow dies erfordert.
• Behalten Sie die Netzwerkzuverlässigkeit im Blick, wenn der Cache deaktiviert ist.

Das Deaktivieren des Cache eignet sich hervorragend, um das Verhalten von Erstnutzern zu simulieren. Wägen Sie die Vor- und Nachteile jedoch anhand Ihrer Testziele ab.

Cache-Daten in Puppeteer entfernen

Automatisierte Tests benötigen häufig einen geleerten Cache, um konsistente Ergebnisse zu gewährleisten.

Cache mit setCacheEnabled() leeren

Sie können Cache-Daten mit Befehlen des Chrome DevTools Protocol (CDP) leeren:

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

Dieser Ansatz leert den Browser-Cache und deaktiviert das Caching, sodass Sie für Ihre Automatisierungsaufgaben mit einer sauberen Ausgangslage beginnen.

Sie können auch Cache und Cookies gleichzeitig leeren:

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

Bestimmte Speichertypen verwalten

Manchmal müssen Sie statt des gesamten Cache nur bestimmte gespeicherte Daten löschen. So können Sie Cookies verwalten:

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

Damit erhalten Sie während Ihrer Tests eine präzise Kontrolle über die Cookie-Verwaltung.

Cache in mehreren Tabs verwalten

Bei der Arbeit mit mehreren Tabs empfiehlt es sich, Cache-Daten mithilfe separater Browser-Kontexte zu isolieren. So geht es:

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

Separate Kontexte verhindern Cache-Konflikte zwischen Tabs und sind daher ideal für parallele Tests.

sbb-itb-23997f1

Cache-Einstellungen für mehr Geschwindigkeit

Eine effektive Cache-Verwaltung in Puppeteer kann die Datenübertragung um bis zu 92 % reduzieren [1] und Automatisierungen deutlich beschleunigen.

Intelligente Nutzung des Cache

Um Geschwindigkeit und aktuelle Daten in Einklang zu bringen, können Sie Anfragen und Antworten abfangen, um intelligenteres Caching zu implementieren. Hier ist ein Beispiel:

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

Dieses Setup minimiert unnötige Netzwerkanfragen und hält gleichzeitig wichtige Daten aktuell, indem es den Header cache-control validiert.

Individuelle Cache-Regeln erstellen

Passen Sie das Caching an Ihre Anforderungen an, indem Sie spezifische Regeln erstellen. Zum Beispiel:

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

Diese Regeln helfen Ihnen festzulegen, welche Antworten zwischengespeichert werden sollen und wie lange sie gespeichert bleiben.

Cache-Performance prüfen

Sobald Ihre Caching-Regeln eingerichtet sind, bewerten Sie deren Auswirkungen anhand von Performance-Kennzahlen:

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

Verfolgen Sie wichtige Kennzahlen wie die Gesamtzahl der Anfragen, gecachte Antworten und eingesparte Daten. Hier ist ein Vergleich auf Grundlage von Tests [1]:

Diese Ergebnisse zeigen, wie stark ein gut konzipiertes Caching die Performance von Puppeteer verbessern kann.

Häufige Probleme und Lösungen

Cache-Probleme beheben

Wenn Sie in Puppeteer die Anfrageabfangung aktivieren, wird das native Caching des Browsers deaktiviert. Dies kann zu höherer Datenübertragung und längeren Seitenladezeiten führen [1]. Um dies zu beheben, können Sie mit dem folgenden Ansatz individuelles Caching implementieren:

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

Um mögliche Speicherlecks zu vermeiden, sollten Sie Ressourcen effektiv bereinigen:

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

Durch die Kombination dieser Techniken können Sie den Overhead reduzieren und die Performance von Puppeteer verbessern.

Tipps zur Cache-Verwaltung

Hier sind einige praktische Tipps für eine effektivere Cache-Verwaltung, basierend auf Tests und Analysen:

Für eine bessere Performance können Sie bestimmte Ressourcen wie Bilder oder Stylesheets blockieren, um das Laden von Seiten zu beschleunigen:

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

Mit diesen Strategien können Sie Ihre Puppeteer-Workflows optimieren und gleichzeitig den Ressourcenverbrauch im Griff behalten.

Fazit

Eine effiziente Cache-Verwaltung in Puppeteer kann die Performance deutlich verbessern und gleichzeitig den Ressourcenverbrauch senken. Dieser Leitfaden hat erläutert, wie Sie Cache-Einstellungen deaktivieren, leeren und anpassen, um bessere Ergebnisse zu erzielen. Nachfolgend finden Sie eine kompakte Zusammenfassung der wichtigsten Strategien und ihrer Auswirkungen.

Zusammenfassung

Tests haben gezeigt, wie wirksam eine richtige Cache-Verwaltung sein kann [1], und unterstreichen die Bedeutung eines sorgfältigen Umgangs damit.

Hier sehen Sie einige zentrale Strategien und ihre Ergebnisse auf einen Blick:

Wichtige Tipps zur Umsetzung

• Asset-Optimierung: Komprimieren Sie Assets und optimieren Sie Bilder, um HTTP-Nutzlasten zu minimieren [2].
• Präzises Timing: Erstellen Sie Screenshots genau dann, wenn die Inhalte bereit sind, und vermeiden Sie unnötige Verzögerungen [2].
• Speichereffizienz: Verwenden Sie Buffer-Operationen statt Dateisystem-Schreibvorgängen, um die Verarbeitung zu beschleunigen [2].

„Bei der Optimierung von Puppeteer sollten Sie bedenken, dass es nur begrenzte Möglichkeiten gibt, die Start- und Stopp-Performance von Puppeteer selbst zu beschleunigen. Die größten Geschwindigkeitsgewinne erzielen Sie höchstwahrscheinlich, indem Sie Ihre Zielseiten schneller rendern lassen.“ – Jon Yongfook, Gründer, Bannerbear [2]