Tiefgehendes Verständnis der Front-End-Leistungsoptimierung: vom Netzwerk bis zum Rendering

1. Netzwerkoptimierung

Reduzieren Sie HTTP-Anfragen

• Ressourcen zusammenführen: Reduzieren Sie die Anzahl der Anfragen durch Zusammenführen von CSS- und JavaScript-Dateien.

• Inline-Ressourcen: Integrieren Sie kleine CSS- und JavaScript-Ressourcen direkt in HTML.

Verwenden Sie HTTP/2

• HTTP/2 unterstützt Multiplexing, reduziert das Blockieren von Anforderungen und erhöht die Ladegeschwindigkeit.

Aktivieren Sie die GZIP-Komprimierung

Serverseitige Konfiguration, Textressourcen komprimieren und Übertragungsvolumen reduzieren.

Cache-Strategie

Verwenden Sie HTTP-Cache-Header wie Cache-Control, um geeignete Cache-Strategien festzulegen.

2. Optimierung der Ressourcenauslastung

Faules Laden

Laden Sie Ressourcen nur, wenn sie kurz vor dem Eintritt in das Ansichtsfenster stehen, geeignet für Bilder und Videos usw.

<img  src="placeholder.jpg" data-src="real-image.jpg" alt="Tiefgehendes Verständnis der Front-End-Leistungsoptimierung: vom Netzwerk bis zum Rendering" >



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

Vermeiden Sie erzwungenes synchrones Layout

• Verwenden Sie requestAnimationFrame- oder CSS-Animationen anstelle komplexer JavaScript-Animationen, um Reflow und Repaint zu reduzieren.

Bildoptimierung

• Wählen Sie das richtige Bildformat (z. B. WebP) und verwenden Sie die richtige Größe und Auflösung.

4. Servicemitarbeiter und Offline-Speicher

• Verwenden Sie Service Worker, um Offline-Caching und Ressourcenaktualisierungen zu implementieren.

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. Leistungsüberwachung und -analyse

• Verwenden Sie Tools wie Lighthouse, WebPageTest oder Chrome DevTools für Leistungstests und -analysen.

6. Code-Splitting und Lazy Loading

Dynamischer Import

Verwenden Sie den dynamischen Import (import()-Ausdruck), um Codeblöcke bei Bedarf zu laden und die anfängliche Ladezeit zu verkürzen.

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

Codeaufteilung auf Routenebene

Verwenden Sie in SPA-Anwendungen die vom Framework bereitgestellte Funktion zur Codeaufteilung auf Routenebene, z. B. das verzögerte Laden von Vue Router.

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

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

7. Bildoptimierung

Responsive Bilder

Verwenden Sie die Funktion Element oder srcset-Attribut, um Bilder mit unterschiedlichen Auflösungen basierend auf dem Pixelverhältnis des Geräts oder der Größe des Ansichtsfensters bereitzustellen.

<picture>
<source srcset="img/low-res.jpg" media="(max-width: 600px)">
<source srcset="img/high-res.jpg" media="(min-width: 600px)">
<img src="img/fallback.jpg" alt="Tiefgehendes Verständnis der Front-End-Leistungsoptimierung: vom Netzwerk bis zum Rendering">
</source></source></picture>

8. Web-Worker

Verschieben Sie zeitaufwändige Rechenaufgaben auf Web Worker, um ein Blockieren des Hauptthreads zu vermeiden und die Reaktionsfähigkeit der Benutzeroberfläche aufrechtzuerhalten.

// 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. Vermeiden Sie Speicherlecks

Bereinigen Sie nicht verwendete Timer, Ereignis-Listener und große Datenstrukturen regelmäßig, um Speicherlecks zu verhindern.

<img  src="placeholder.jpg" data-src="real-image.jpg" alt="Tiefgehendes Verständnis der Front-End-Leistungsoptimierung: vom Netzwerk bis zum Rendering" >



<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. Web Vitals-Überwachung

Konzentrieren Sie sich auf Web-Vitals-Metriken wie LCP (größte Content-Paint), FID (erste Eingabeverzögerung) und CLS (kumulative Layoutverschiebung), die Schlüsselindikatoren für die Messung der Benutzererfahrung sind.

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

Das obige ist der detaillierte Inhalt vonTiefgehendes Verständnis der Front-End-Leistungsoptimierung: vom Netzwerk bis zum Rendering. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!