michaelschiemer/resources/js/docs/prefetch.md

Link Prefetching System

🚀 Overview

Das erweiterte Prefetching-System für interne Links bietet mehrere Strategien zur Verbesserung der Navigation-Performance:

• Hover Prefetching: Lädt Seiten vor, wenn der Nutzer mit der Maus über Links fährt
• Visible Prefetching: Lädt Links, die im Viewport sichtbar werden (Intersection Observer)
• Eager Prefetching: Sofortiges Laden wichtiger Seiten
• Browser Hints: Nutzt native <link rel="prefetch"> für optimale Browser-Integration

📋 Features

• ✅ Multiple Prefetch-Strategien (hover, visible, eager)
• ✅ Intersection Observer für sichtbare Links
• ✅ Intelligentes Cache-Management mit TTL
• ✅ Priority-based Fetching (high/low)
• ✅ Network-aware Configuration (4G, 3G, 2G)
• ✅ Browser Prefetch Hints (<link rel="prefetch">)
• ✅ Abort Controller für Timeout-Management
• ✅ Performance Monitoring und Stats

🔧 Basic Usage

Mit dem Router

import { startRouter } from './core/router.js';

// Standard-Konfiguration
startRouter({
    strategies: ['hover', 'visible'],
    hoverDelay: 150,
    observerMargin: '50px',
    maxCacheSize: 20,
    cacheTTL: 60000
});

Adaptive Konfiguration

import { startRouter } from './core/router.js';
import { getAdaptiveConfig } from './core/prefetch-config.js';

// Passt sich automatisch an die Netzwerkverbindung an
startRouter(getAdaptiveConfig());

Direkte API-Nutzung

import { getPrefetched, prefetchHref, prefetchUrls } from './core/ClickManager.js';

// Einzelne URL prefetchen
prefetchHref('/about');

// Mehrere URLs prefetchen
prefetchUrls(['/products', '/contact', '/team']);

// Gecachten Content abrufen
const html = getPrefetched('/about');
if (html) {
    render(html);
}

🎯 Prefetch Strategies

1. Hover Strategy

Links werden vorgeladen, wenn der Nutzer mit der Maus darüber fährt:

{
    strategies: ['hover'],
    hoverDelay: 150  // Wartezeit in ms
}

2. Visible Strategy

Links werden vorgeladen, wenn sie in den Viewport kommen:

{
    strategies: ['visible'],
    observerMargin: '50px'  // Lädt 50px bevor Link sichtbar wird
}

3. Eager Strategy

Wichtige Links sofort laden:

<!-- HTML Attribute -->
<a href="/important-page" data-prefetch="eager">Important Link</a>

// Oder programmatisch
prefetchUrls(['/critical-path-1', '/critical-path-2']);

4. Combined Strategies

Mehrere Strategien kombinieren:

{
    strategies: ['hover', 'visible', 'eager'],
    // Weitere Optionen...
}

⚙️ Configuration Options

Option	Type	Default	Description
strategies	Array	['hover', 'visible']	Aktive Prefetch-Strategien
hoverDelay	Number	150	Verzögerung vor Hover-Prefetch (ms)
observerMargin	String	'50px'	Intersection Observer Margin
maxCacheSize	Number	20	Maximale Anzahl gecachter Seiten
cacheTTL	Number	60000	Cache-Lebensdauer in ms
priority	String	'low'	Fetch Priority ('low' oder 'high')

📊 Performance Monitoring

import { getPrefetcher } from './core/ClickManager.js';

// Stats abrufen
const prefetcher = getPrefetcher();
const stats = prefetcher.getStats();

console.log(stats);
// {
//     cacheSize: 5,
//     prefetching: 2,
//     prefetched: 10,
//     strategies: ['hover', 'visible']
// }

🎨 HTML Attributes

Links können mit speziellen Attributen gesteuert werden:

<!-- Eager Prefetch -->
<a href="/page" data-prefetch="eager">Sofort laden</a>

<!-- Kein Prefetch -->
<a href="/page" data-no-prefetch>Nicht vorladen</a>

<!-- View Transition -->
<a href="/page" data-view-transition>Mit Animation</a>

<!-- Modal -->
<a href="/page" data-modal>Als Modal öffnen</a>

🌐 Network-Aware Configuration

import { getAdaptiveConfig } from './core/prefetch-config.js';

// Automatische Anpassung basierend auf:
// - Connection.effectiveType (4g, 3g, 2g)
// - Connection.saveData
// - Device capabilities

const config = getAdaptiveConfig();
startRouter(config);

🚫 Ausnahmen

Folgende Links werden nicht geprefetcht:

• Externe Links (andere Domain)
• Links mit target="_blank"
• Download Links (download Attribute)
• Hash Links (#section)
• Links mit data-no-prefetch
• mailto: und tel: Links

💡 Best Practices

1. Mobile First: Konservative Einstellungen für Mobile
2. Critical Path: Wichtige Navigation-Links mit data-prefetch="eager"
3. Monitor Performance: Cache-Stats überwachen
4. Network Detection: Adaptive Config für verschiedene Verbindungen
5. User Preference: prefers-reduced-data Media Query beachten

🔍 Debugging

// Debug Logging aktivieren
localStorage.setItem('DEBUG', 'true');

// Prefetch Stats
const stats = getPrefetcher().getStats();
console.table(stats);

// Cache leeren
getPrefetcher().clearCache();

🎯 Beispiel-Konfigurationen

Aggressive (Schnelle Verbindung)

{
    strategies: ['hover', 'visible', 'eager'],
    hoverDelay: 50,
    observerMargin: '200px',
    maxCacheSize: 50,
    cacheTTL: 300000,
    priority: 'high'
}

Conservative (Langsame Verbindung)

{
    strategies: ['hover'],
    hoverDelay: 300,
    maxCacheSize: 10,
    cacheTTL: 30000,
    priority: 'low'
}

Disabled

{
    strategies: [],
    maxCacheSize: 0
}