In-depth understanding of front-end performance optimization: from network to rendering

1. Network optimization

Reduce HTTP requests

• Merge resources: Reduce the number of requests by merging CSS and JavaScript files.

• Inline resources: For small CSS and JavaScript, inline them directly into HTML.

Use HTTP/2

• HTTP/2 supports multiplexing, reduces request blocking, and increases loading speed.

Enable GZIP compression

Server-side configuration, compress text resources, and reduce transmission volume.

Cache strategy

Use HTTP cache headers, such as Cache-Control, to set appropriate cache strategies.

2. Resource loading optimization

Lazy loading

Only load resources when they are about to enter the viewport, suitable for images and videos, etc.

<img  src="/static/imghw/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="In-depth understanding of front-end performance optimization: from network to 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>

Avoid forced synchronous layout

• Use requestAnimationFrame or CSS animation instead of complex JavaScript animation to reduce reflow and repaint.

Image optimization

• Choose the right image format (such as WebP) and use the right size and resolution.

4. Service Worker and offline storage

• Use Service Worker to implement offline caching and resource updates.

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. Performance Monitoring and Analysis

• Use tools such as Lighthouse, WebPageTest or Chrome DevTools for performance testing and analysis.

6. Code Splitting and Lazy Loading

Dynamic Import

Use dynamic import (import() expression) to load code blocks on demand and reduce initial loading time.

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

Route-level code splitting

In SPA applications, use the route-level code splitting function provided by the framework, such as Vue Router's lazy loading.

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

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

7. Image optimization

Responsive images

Use the element or srcset attribute to provide images of different resolutions based on the device pixel ratio or viewport size.

<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="In-depth understanding of front-end performance optimization: from network to rendering">
</source></source></picture>

8. Web Workers

Move time-consuming computing tasks to Web Workers to avoid blocking the main thread and keep the UI responsive.

// 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. Avoid memory leaks

Regularly clean up unused timers, event listeners, and large data structures to prevent memory leaks.

<img  src="/static/imghw/default1.png" data-src="placeholder.jpg" class="lazy" data- alt="In-depth understanding of front-end performance optimization: from network to 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 Monitoring

Focus on Web Vitals metrics such as LCP (largest content paint), FID (first input delay) and CLS (cumulative layout shift), which are key indicators for measuring user experience.

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

The above is the detailed content of In-depth understanding of front-end performance optimization: from network to rendering. For more information, please follow other related articles on the PHP Chinese website!