# ⚡ Performance - Aide-Mémoire Rapide

## 🎯 Que faire MAINTENANT ?

### 1. Lire ceci (2 min)
Vous êtes au bon endroit ! 👇

### 2. Appliquer Virtual Scroll (15 min)
```vue
<script setup>
import { useVirtualScroll } from '@/shared/composables/useVirtualScroll'
const items = ref([...1000 items...])
const { visibleItems, containerStyle, topSpacerStyle, bottomSpacerStyle } = 
  useVirtualScroll(items, { itemHeight: 60 })
</script>

<template>
  <div :style="containerStyle">
    <div :style="topSpacerStyle"></div>
    <Item v-for="item in visibleItems" :key="item.id" />
    <div :style="bottomSpacerStyle"></div>
  </div>
</template>
```

**Fichiers cibles:**
- `LeaderboardTable.vue`
- `DashboardPage.web.vue` (liste plans)
- `NotificationCenter` (si 100+ notifications)
- `SearchPage` (résultats)

### 3. Optimiser Watchers (10 min)
```typescript
// ❌ AVANT
watch(() => searchQuery.value, (query) => {
  searchAPI(query)  // Appelé trop souvent!
})

// ✅ APRÈS
import { watchDebounced } from '@/shared/utils/reactiveOptimizer'
watchDebounced(() => searchQuery.value, (query) => {
  searchAPI(query)
}, 300)  // Attend 300ms après dernière frappe
```

**Fichiers cibles:**
- `CreateSessionDialog.vue`
- `LiveChat.vue`
- `JoinSessionDialog.vue`

---

## 📚 Documentation Complète

| Besoin | Fichier | Temps |
|--------|---------|-------|
| **Vue d'ensemble rapide** | `PERFORMANCE_SUMMARY.md` | 5 min |
| **Guide complet détaillé** | `PERFORMANCE_OPTIMIZATION_GUIDE.md` | 20 min |
| **Visualisation graphique** | `PERFORMANCE_VISUAL_INDEX.md` | 10 min |
| **Aide-mémoire** | `PERFORMANCE_CHEATSHEET.md` ← **ICI** | 2 min |

---

## 🛠️ Utilitaires Disponibles

### reactiveOptimizer.ts
```typescript
import {
  computedDebounced,      // Computed + debounce
  watchDebounced,         // Watch + debounce
  watchThrottled,         // Watch + throttle
  largeListRef,           // Ref optimisé grandes listes
  computedArrayShallow,   // Array computed optimisé
  memoize                 // Cache fonction
} from '@/shared/utils/reactiveOptimizer'
```

### useVirtualScroll.ts
```typescript
import { useVirtualScroll } from '@/shared/composables/useVirtualScroll'
const { visibleItems, containerStyle, topSpacerStyle, bottomSpacerStyle } = 
  useVirtualScroll(items, { itemHeight: 60 })
```

---

## 📊 Gains Attendus

| Optimisation | Gain | Priorité |
|--------------|------|----------|
| JSON.parse safe | -100% crashes | ✅ **FAIT** |
| Lazy loading images | -40% page load | ✅ **FAIT** |
| Virtual scroll | -95% render time | 🔴 **À FAIRE** |
| Optimiser watchers | -60% re-renders | 🔴 **À FAIRE** |
| Code splitting | -30% bundle | 🟡 Optionnel |

---

## 🧪 Tests Rapides

### JSON Parse Safety ✅
```javascript
localStorage.setItem('planContext', '{invalid')
// Recharger → App continue (pas de crash)
```

### Lazy Loading ✅
```bash
# DevTools → Network → Throttle 3G → Scroll
# Images chargent progressivement
```

### Virtual Scroll (après application)
```bash
# Leaderboard 1000+ users
# DevTools → Performance → 60 FPS scroll
```

---

## 🚀 Commandes Essentielles

```bash
# Analyse complète
./apply-performance-optimizations.sh

# Type-check
pnpm --filter @my-roadtrip/web type-check

# Build
pnpm --filter @my-roadtrip/web build

# Dev
pnpm dev
```

---

## ✅ Checklist Mini

**Phase 1 (Fait) ✅**
- [x] JSON.parse sécurisés
- [x] Images lazy loaded
- [x] Utilitaires créés

**Phase 2 (À faire) 🔄**
- [ ] Virtual scroll (4 composants)
- [ ] Watchers optimisés (5 fichiers)
- [ ] Dashboard divisé

**Phase 3 (Optionnel) ⏳**
- [ ] Code splitting
- [ ] Tree-shaking

---

## 📞 Support 1-Click

| Question | Réponse |
|----------|---------|
| Où commencer ? | `PERFORMANCE_SUMMARY.md` |
| Comment virtual scroll ? | `useVirtualScroll.ts` (exemples inline) |
| Comment optimiser watchers ? | `reactiveOptimizer.ts` (exemples inline) |
| Problème build ? | `pnpm type-check` puis corriger erreurs |

---

**Score actuel:** 40/100  
**Score projeté:** 70/100 (avec Phase 2)  
**Objectif final:** 90+/100  

**Next Step:** Appliquer virtual scroll sur LeaderboardTable.vue (15 min)
