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="placeholder.jpg" data-src="real-image.jpg" class="lazy" />

<script>

    document.addEventListener('DOMContentLoaded', function() {

        let lazyImages = document.querySelectorAll('.lazy');

        lazyImages.forEach(img => {

            img.src = img.dataset.src;

        });

    });

</script>

Preloading and prefetching

Use <link rel="preload"> to load critical resources in advance.

Use <link rel="prefetch"> to prefetch non-critical resources.

3. Rendering optimization

Critical CSS

Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.

Reduce CSS and JavaScript blocking

• Use <link rel="stylesheet" media="print" onload="this.media='all'"> 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 <picture> 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="img/fallback.jpg" alt="Example">

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

window.addEventListener('resize', handleResize);

// Cleanup

window.removeEventListener('resize', handleResize);



// For setTimeout or setInterval

let timerId = setInterval(() => { /*...*/ }, 1000);

clearInterval(timerId);

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.

// Use the Web Vitals library for monitoring

import { getCLS, getFID, getLCP } from 'web-vitals';



getCLS(console.log);

getFID(console.log);

getLCP(console.log);