Cache-Verwaltung in Puppeteer: Deaktivieren, Löschen und Leistungsoptimierung

Willst du schneller Puppenspieler Automatisierung? Die Verwaltung des Browser-Cache ist entscheidend. Diese Anleitung beschreibt, wie Sie den Cache deaktivieren, leeren und optimieren, um die Leistung zu verbessern.

Die zentralen Thesen:

• Deaktivieren des Cache: Benutzen setCacheEnabled(false) oder Browser-Startflags wie --disable-cache um das Laden neuer Seiten zu simulieren.
• Löschen des Caches: Benutzen Network.clearBrowserCache Chrome DevTools-Protokoll (CDP) für saubere Testumgebungen.
• Intelligentes Caching: Reduzieren Sie die Datenübertragung um bis zu 92 % mit benutzerdefinierter Caching-Logik und In-Memory-Speicher.
• Leistungssteigerung: Blockieren Sie unnötige Ressourcen wie Bilder oder Anzeigen, um Tests zu beschleunigen und Bandbreite zu sparen.

Effizientes Cache-Management kann den Datenverbrauch drastisch reduzieren, die Testgenauigkeit verbessern und Automatisierungs-Workflows beschleunigen. Erfahren Sie mehr darüber!

Puppenspieler Tutorial Nr. 4 | Browser mit Optionen starten

Cache in Puppeteer deaktivieren

Das Deaktivieren des Caches in Puppeteer kann für Test- und Automatisierungsaufgaben hilfreich sein, bei denen neue Seiten geladen werden müssen. Hier erfahren Sie, wie Sie es tun und was Sie beachten sollten.

Verwendung der setCacheEnabled() Methode

Sie können das Caching in Puppeteer mit dem setCacheEnabled() Verfahren:

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 eine saubere Ressourcenladung erfordern. Eine browserweite Lösung finden Sie im nächsten Abschnitt.

Browser-Startflags für den Cache

Um das Caching auf Browserebene zu deaktivieren, starten Sie Chromium mit bestimmten Flaggen:

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

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

Was passiert, wenn Sie den Cache deaktivieren?

Wenn der Cache deaktiviert ist, wird jede Ressource neu heruntergeladen, was zu einer Verlangsamung und einem erhöhten Datenverbrauch führen kann. Beispielsweise werden Tests auf CNNDie Website von zeigte einen Anstieg der Datenübertragung um 88 %, wenn das Caching deaktiviert war. Um ein Gleichgewicht zwischen Genauigkeit und Leistung zu finden, beachten Sie diese Tipps:

• Verwenden Sie Chrome DevTools, um zu überprüfen, ob der Seiteninhalt zwischengespeichert werden kann.
• Fügen Sie gegebenenfalls In-Memory-Caching für bestimmte Ressourcen hinzu.
• Deaktivieren Sie den Cache nur, wenn Ihr Testszenario dies erfordert.
• Behalten Sie die Netzwerkzuverlässigkeit im Auge, wenn der Cache deaktiviert ist.

Das Deaktivieren des Caches eignet sich hervorragend zum Simulieren des Verhaltens erstmaliger Benutzer, wägen Sie jedoch die Kompromisse basierend auf Ihren Testzielen ab.

Entfernen von Cache-Daten in Puppeteer

Bei automatisierten Tests muss der Cache häufig geleert werden, um konsistente Ergebnisse zu gewährleisten.

Cache leeren mit setCacheEnabled()

Sie können Cache-Daten mithilfe von Chrome DevTools Protocol (CDP)-Befehlen löschen:

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

Dieser Ansatz löscht den Browser-Cache und deaktiviert das Caching, wodurch Sie für Ihre Automatisierungsaufgaben einen sauberen Startpunkt haben.

Sie können Cache und Cookies auch zusammen löschen:

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

Umgang mit bestimmten Speichertypen

Manchmal müssen Sie bestimmte gespeicherte Daten löschen, anstatt den gesamten Cache. So verwalten Sie 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);

Dies ermöglicht eine präzise Kontrolle über die Cookie-Verwaltung während Ihrer Tests.

Cache in mehreren Registerkarten verwalten

Beim Arbeiten mit mehreren Tabs empfiehlt es sich, Cache-Daten durch die Verwendung separater Browserkontexte zu isolieren. So geht's:

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

Durch die Verwendung separater Kontexte werden Cache-Interferenzen zwischen Registerkarten vermieden, sodass sich dies ideal für die Ausführung paralleler Tests eignet.

sbb-itb-23997f1

Cache-Einstellungen für bessere Geschwindigkeit

Durch die effektive Verwaltung des Cache in Puppeteer kann die Datenübertragung um bis zu 92%, wodurch die Automatisierung deutlich schneller erfolgt.

Intelligente Cache-Nutzung

Um Geschwindigkeit und Datenaktualität in Einklang zu bringen, können Sie Anfragen und Antworten abfangen und so intelligenteres Caching implementieren. Hier 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 auf dem neuesten Stand, indem es die cache-control Header.

Erstellen benutzerdefinierter Cache-Regeln

Passen Sie das Caching an Ihre Bedürfnisse 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);
    }
};

Mithilfe dieser Regeln lässt sich bestimmen, welche Antworten zwischengespeichert und wie lange sie aufbewahrt werden sollen.

Überprüfen der Cache-Leistung

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

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, die Anzahl der zwischengespeicherten Antworten und die Anzahl der gespeicherten Daten. Hier ist ein Vergleich basierend auf Tests:

Diese Ergebnisse zeigen, wie gut konzipiertes Caching die Leistung von Puppeteer drastisch verbessern kann.

Häufige Probleme und Lösungen

Beheben von Cache-Problemen

Bei Verwendung von Puppeteer deaktiviert die Aktivierung der Anforderungsabfangfunktion das native Caching des Browsers. Dies kann zu höheren Datenübertragungsraten und langsameren Seitenladezeiten führen. Um dies zu beheben, können Sie benutzerdefiniertes Caching mit dem folgenden Ansatz 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 potenzielle Speicherlecks zu vermeiden, achten Sie darauf, die Ressourcen effektiv zu 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 Leistung 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 Leistung können Sie bestimmte Ressourcen wie Bilder oder Stylesheets blockieren, um das Laden der Seite 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();
    }
});

Durch die Verwendung dieser Strategien können Sie Ihre Puppeteer-Workflows optimieren und gleichzeitig die Ressourcennutzung unter Kontrolle halten.

Schlussfolgerung

Effizientes Cache-Management in Puppeteer kann die Leistung deutlich verbessern und gleichzeitig den Ressourcenverbrauch reduzieren. Diese Anleitung beschreibt, wie Sie Cache-Einstellungen deaktivieren, löschen und anpassen, um bessere Ergebnisse zu erzielen. Nachfolgend finden Sie eine kurze Zusammenfassung der wichtigsten Strategien und ihrer Auswirkungen.

Zusammenfassungspunkte

Tests haben gezeigt, wie effektiv eine ordnungsgemäße Cache-Verwaltung sein kann, und unterstreichen die Bedeutung eines sorgfältigen Umgangs damit.

Hier ein kurzer Überblick über einige wichtige Strategien und ihre Ergebnisse:

Wichtige Tipps zur Implementierung

• Anlagenoptimierung: Komprimieren Sie Assets und optimieren Sie Bilder, um HTTP-Nutzlasten zu minimieren.
• Präzises Timing: Machen Sie Screenshots genau dann, wenn der Inhalt fertig ist, und vermeiden Sie so unnötige Verzögerungen.
• Speichereffizienz: Verwenden Sie Puffervorgänge anstelle von Dateisystemschreibvorgängen, um die Verarbeitung zu beschleunigen.

„Bedenken Sie bei der Optimierung von Puppeteer, dass es nur begrenzte Möglichkeiten gibt, die Start-/Herunterfahrleistung von Puppeteer selbst zu beschleunigen. Die größten Geschwindigkeitsgewinne werden wahrscheinlich dadurch erzielt, dass Sie Zielseiten, die schneller gerendert werden sollen." - Jon Yongfook, Gründer, Bannerbear

Zusammenhängende Artikel

• Installieren und Konfigurieren von Puppeteer: Lösen häufiger Abhängigkeits- und Chromium-Probleme
• Seitennavigation mit Puppeteer meistern: Effektive Nutzung von „goto“ und Navigationsoptionen
• Browserautomatisierung mit Puppeteer und JavaScript: Praktische Umsetzung in Node.js
• Cookie-Verwaltung in Puppeteer: Sitzungserhaltung, Authentifizierungsemulation und Einschränkungen