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

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

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

### Adaptive Konfiguration

```js
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

```js
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:

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

### 2. Visible Strategy
Links werden vorgeladen, wenn sie in den Viewport kommen:

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

### 3. Eager Strategy
Wichtige Links sofort laden:

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

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

### 4. Combined Strategies
Mehrere Strategien kombinieren:

```js
{
    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

```js
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:

```html
<!-- 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

```js
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

```js
// 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)
```js
{
    strategies: ['hover', 'visible', 'eager'],
    hoverDelay: 50,
    observerMargin: '200px',
    maxCacheSize: 50,
    cacheTTL: 300000,
    priority: 'high'
}
```

### Conservative (Langsame Verbindung)
```js
{
    strategies: ['hover'],
    hoverDelay: 300,
    maxCacheSize: 10,
    cacheTTL: 30000,
    priority: 'low'
}
```

### Disabled
```js
{
    strategies: [],
    maxCacheSize: 0
}
```