Compréhension approfondie de l'optimisation des performances front-end : du réseau au rendu

1. Optimisation du réseau

Réduisez les requêtes HTTP

• Fusionner les ressources : réduisez le nombre de requêtes en fusionnant les fichiers CSS et JavaScript.

• Ressources en ligne : pour les petits CSS et JavaScript, intégrez-les directement dans HTML.

Utiliser HTTP/2

• HTTP/2 prend en charge le multiplexage, réduit le blocage des requêtes et augmente la vitesse de chargement.

Activer la compression GZIP

Configuration côté serveur, compressez les ressources de texte et réduisez le volume de transmission.

Stratégie de cache

Utilisez les en-têtes de cache HTTP, tels que Cache-Control, pour définir des stratégies de cache appropriées.

2. Optimisation du chargement des ressources

Chargement paresseux

Chargez les ressources uniquement lorsqu'elles sont sur le point d'entrer dans la fenêtre d'affichage, adaptées aux images et aux vidéos, etc.

<img  src="/static/imghw/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="Compréhension approfondie de l'optimisation des performances front-end : du réseau au rendu" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

Évitez la mise en page synchrone forcée

• Utilisez requestAnimationFrame ou une animation CSS au lieu d'une animation JavaScript complexe pour réduire la redistribution et la repeinture.

Optimisation des images

• Choisissez le bon format d'image (tel que WebP) et utilisez la bonne taille et la bonne résolution.

4. Service Worker et stockage hors ligne

• Utilisez Service Worker pour implémenter la mise en cache hors ligne et les mises à jour des ressources.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(error => console.error('SW registration failed:', error));
    });
}

5. Surveillance et analyse des performances

• Utilisez des outils tels que Lighthouse, WebPageTest ou Chrome DevTools pour tester et analyser les performances.

6. Fractionnement de code et chargement paresseux

Importation dynamique

Utilisez l'importation dynamique (expression import()) pour charger des blocs de code à la demande et réduire le temps de chargement initial.

button.onclick = async () => {
    const module = await import('./lazyModule.js');
    module.default();
};

Fractionnement du code au niveau de la route

Dans les applications SPA, utilisez la fonction de fractionnement de code au niveau de la route fournie par le framework, telle que le chargement paresseux de Vue Router.

// Vue Router example
const Foo = () => import('./Foo.vue');

const routes = [
{ path: '/foo', component: Foo },
];

7. Optimisation des images

Images réactives

Utilisez l'option élément ou attribut srcset pour fournir des images de différentes résolutions en fonction du rapport de pixels de l'appareil ou de la taille de la fenêtre d'affichage.

<picture>
<source srcset="img/low-res.jpg" media="(max-width: 600px)">
<source srcset="img/high-res.jpg" media="(min-width: 600px)">
<img src="/static/imghw/default1.png" data-src="img/fallback.jpg" class="lazy" alt="Compréhension approfondie de loptimisation des performances front-end : du réseau au rendu">
</source></source></picture>

8. Travailleurs du Web

Déplacez les tâches informatiques fastidieuses vers Web Workers pour éviter de bloquer le thread principal et garder l'interface utilisateur réactive.

// main.js
const worker = new Worker('worker.js');
worker.postMessage([1024, 512]);

// worker.js
self.onmessage = function(e) {
    const result = e.data[0] * e.data[1];
    self.postMessage(result);
};

9. Évitez les fuites de mémoire

Nettoyez régulièrement les minuteries, les écouteurs d'événements et les structures de données volumineuses inutilisées pour éviter les fuites de mémoire.

<img  src="/static/imghw/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="Compréhension approfondie de l'optimisation des performances front-end : du réseau au rendu" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

10. Surveillance des éléments vitaux Web

Concentrez-vous sur les métriques Web Vitals telles que LCP (plus grande peinture de contenu), FID (premier délai de saisie) et CLS (changement de mise en page cumulatif), qui sont des indicateurs clés pour mesurer l'expérience utilisateur.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(registration => console.log('SW registered:', registration))
        .catch(error => console.error('SW registration failed:', error));
    });
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!