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

天涯学馆

发布于 2024-07-26 16:50:29

12100

代码可运行

文章被收录于专栏：Web大前端Web大前端

运行总次数：0

代码可运行

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" class="lazy" />
<script>
document.addEventListener('DOMContentLoaded', function() {
  let lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach(img => {
    img.src = img.dataset.src;
  });
});
</script>

预加载与预读取

使用<link rel="preload">提前加载关键资源。使用<link rel="prefetch">预读取非关键资源。

3. 渲染优化

Critical CSS

将首屏渲染所需的CSS内联在HTML头部，避免阻塞渲染。

减少CSS和JavaScript的阻塞

使用<link rel="stylesheet" media="print" onload="this.media='all'">延迟非关键CSS加载。
使用async或defer属性异步加载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 示例
const Foo = () => import('./Foo.vue');

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

7. 图像优化

响应式图片

利用<picture>元素或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="Example">
</picture>

8. Web Workers

将耗时的计算任务移到Web Worker中，避免阻塞主线程，保持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. 避免内存泄漏

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

window.addEventListener('resize', handleResize);
// 清理
window.removeEventListener('resize', handleResize);

// 对于setTimeout或setInterval
let timerId = setInterval(() => { /*...*/ }, 1000);
clearInterval(timerId);

10. Web Vitals监控

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

// 使用Web Vitals库进行监控
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染

本文分享自天涯学馆微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度