深入理解前端性能优化：从网络到渲染

1. 网络优化

减少 HTTP 请求

• 合并资源：通过合并 CSS 和 JavaScript 文件来减少请求数量。

• 内联资源：对于小型 CSS 和 JavaScript，将它们直接内联到 HTML 中。

使用 HTTP/2

• HTTP/2 支持多路复用，减少请求阻塞，提高加载速度。

启用 GZIP 压缩

服务器端配置，压缩文本资源，减少传输量。

缓存策略

使用 HTTP 缓存标头，例如 Cache-Control，设置适当的缓存策略。

2.资源加载优化

延迟加载

仅在即将进入视口时加载资源，适合图片、视频等

<img  src="placeholder.jpg" data-src="real-image.jpg" alt="深入理解前端性能优化：从网络到渲染" >



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

避免强制同步布局

• 使用 requestAnimationFrame 或 CSS 动画代替复杂的 JavaScript 动画来减少回流和重绘。

图像优化

• 选择正确的图像格式（例如 WebP）并使用正确的尺寸和分辨率。

4. Service Worker和离线存储

• 使用Service Worker实现离线缓存和资源更新。

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. 性能监控与分析

• 使用 Lighthouse、WebPageTest 或 Chrome DevTools 等工具进行性能测试和分析。

6. 代码分割和延迟加载

动态导入

使用动态导入（import()表达式）按需加载代码块，减少初始加载时间。

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

路由级代码分割

在 SPA 应用中，使用框架提供的路由级代码拆分功能，例如 Vue Router 的延迟加载。

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

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

7、图像优化

响应式图像

使用 element 或 srcset 属性可根据设备像素比或视口大小提供不同分辨率的图像。

<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="深入理解前端性能优化：从网络到渲染">
</source></source></picture>

8. 网络工作者

将耗时的计算任务移至 Web Workers，以避免阻塞主线程并保持 UI 响应能力。

// 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. 避免内存泄漏

定期清理未使用的计时器、事件监听器和大型数据结构，以防止内存泄漏。

<img  src="placeholder.jpg" data-src="real-image.jpg" alt="深入理解前端性能优化：从网络到渲染" >



<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. 网络生命体征监控

重点关注LCP（最大内容绘制）、FID（首次输入延迟）和CLS（累积布局偏移）等Web Vitals指标，这些是衡量用户体验的关键指标。

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

以上是深入理解前端性能优化：从网络到渲染的详细内容。更多信息请关注PHP中文网其他相关文章！