Cache-Verwaltung in Puppeteer: Deaktivieren, Leeren 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()` Methodik

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

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);

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:

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

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 [1].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:

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

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:

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

Umgang mit bestimmten Speichertypen

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

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:

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

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% [1]., 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:

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

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:

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

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:

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

Verfolgen Sie wichtige Kennzahlen wie Gesamtanfragen, zwischengespeicherte Antworten und gespeicherte Daten. Hier ist ein Vergleich basierend auf Tests [1].:

Metriktyp	Ohne Cache	Mit Cache	Verbesserung
Datenübernahme	177 MB	13.4 MB	92% Ermäßigung

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. [1].Um dieses Problem zu beheben, können Sie benutzerdefiniertes Caching mit dem folgenden Ansatz implementieren:

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

Um potenzielle Speicherlecks zu vermeiden, achten Sie darauf, die Ressourcen effektiv zu bereinigen:

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

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:

Problem	Lösung	Auswirkungen
Hohe Datenübertragungsrate	Verwenden Sie In-Memory-Caching	Reduziert den Verkehr um bis zu 92 % [1].
Ressourcenlecks	Bereinigungsverfahren anwenden	Hilft dabei, Gedächtniserschöpfung vorzubeugen [3].
Langsames Laden von Seiten	Blockieren Sie unnötige Ressourcen	Verbessert die Rendering-Geschwindigkeit deutlich [2].

Für eine bessere Leistung können Sie bestimmte Ressourcen wie Bilder oder Stylesheets blockieren, um das Laden der Seite zu beschleunigen:

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

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

Fazit

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 [1].und betont, wie wichtig ein sorgfältiger Umgang damit ist.

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

Strategie	Umsetzung	Auswirkungen auf die Leistung
In-Memory-Caching	Cache-Antworten mit max-age > 0	92% Reduzierung des Datentransfers [1]
Ressourcenblockierung	Deaktivieren Sie Anzeigen und Tracking-Skripte	Spürbare Verbesserung der Seitenladezeit [2]
Intelligentes Screenshot-Timing	Verwenden Sie waitForSelector()	Schnellere Fertigstellung des Renderings [2]
Sitzungsübergreifendes Caching	Benutzerdatenverzeichnis konfigurieren	Behält CSS/JS/Bildressourcen bei [2]

Wichtige Tipps zur Implementierung

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

„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 [2].

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

Die zentralen Thesen:

Puppenspieler Tutorial Nr. 4 | Browser mit Optionen starten

Cache in Puppeteer deaktivieren

Verwendung der `setCacheEnabled()` Methodik

Browser-Startflags für den Cache

Was passiert, wenn Sie den Cache deaktivieren?

Entfernen von Cache-Daten in Puppeteer

Cache leeren mit `setCacheEnabled()`

Umgang mit bestimmten Speichertypen

Cache in mehreren Registerkarten verwalten

sbb-itb-23997f1

Cache-Einstellungen für bessere Geschwindigkeit

Intelligente Cache-Nutzung

Erstellen benutzerdefinierter Cache-Regeln

Überprüfen der Cache-Leistung

Häufige Probleme und Lösungen

Beheben von Cache-Problemen

Tipps zur Cache-Verwaltung

Fazit

Zusammenfassungspunkte

Wichtige Tipps zur Implementierung

Ähnliche Artikel

Ähnliche Artikel

Was ist ein Headless-Browser? Ein Leitfaden zu Automatisierung, Tests und Web Scraping

Headless-Browser für Web Scraping: Top-Tools und -Techniken für 2025

Headless-Browser-Erkennung: Techniken und Strategien, um Bots auszutricksen

Die zentralen Thesen:

Puppenspieler Tutorial Nr. 4 | Browser mit Optionen starten

Cache in Puppeteer deaktivieren

Verwendung der setCacheEnabled() Methodik

Browser-Startflags für den Cache

Was passiert, wenn Sie den Cache deaktivieren?

Entfernen von Cache-Daten in Puppeteer

Cache leeren mit setCacheEnabled()

Umgang mit bestimmten Speichertypen

Cache in mehreren Registerkarten verwalten

sbb-itb-23997f1

Cache-Einstellungen für bessere Geschwindigkeit

Intelligente Cache-Nutzung

Erstellen benutzerdefinierter Cache-Regeln

Überprüfen der Cache-Leistung

Häufige Probleme und Lösungen

Beheben von Cache-Problemen

Tipps zur Cache-Verwaltung

Fazit

Zusammenfassungspunkte

Wichtige Tipps zur Implementierung

Ähnliche Artikel

Ähnliche Artikel

Was ist ein Headless-Browser? Ein Leitfaden zu Automatisierung, Tests und Web Scraping

Headless-Browser für Web Scraping: Top-Tools und -Techniken für 2025

Headless-Browser-Erkennung: Techniken und Strategien, um Bots auszutricksen

Verwendung der `setCacheEnabled()` Methodik

Cache leeren mit `setCacheEnabled()`