前端技术分享
0%

前端性能优化技巧

发表于 分类于

为什么需要性能优化？

网站加载慢会让用户流失。好的性能能提升用户体验和搜索引擎排名。前端性能优化涉及多个方面，从代码到网络。

网络层面优化

1. 压缩资源

  • Gzip 压缩：服务器端启用 Gzip，压缩 HTML、CSS、JS 文件
  • 图片优化：用 WebP 格式，压缩图片大小

2. 减少 HTTP 请求

  • 合并文件：把多个 CSS/JS 文件合并
  • 雪碧图：小图标合成一张大图
  • 内联小资源：小 CSS/JS 直接写在 HTML 中

3. 使用 CDN

把静态资源放在 CDN 上，加速加载。

代码层面优化

1. 减少重绘重排

  • 避免频繁操作 DOM
  • 用 CSS3 动画代替 JS 动画
  • 批量修改样式

2. 懒加载

图片和组件等到需要时再加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 图片懒加载
<img data-src="image.jpg" alt="懒加载图片">

// JS 实现
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => imageObserver.observe(img));

3. 代码分割

用 Webpack 等工具分割代码，按需加载。

1
2
3
4
// 动态导入
import('./module.js').then(module => {
  // 使用模块
});

缓存优化

1. 浏览器缓存

设置合适的 Cache-Control 头。

2. Service Worker

用 Service Worker 缓存资源，实现离线访问。

工具和监控

1. Lighthouse

Chrome 开发者工具的 Lighthouse 可以分析性能。

2. Web Vitals

Google 的性能指标：LCP、FID、CLS。

移动端优化

  • 响应式设计
  • 触摸事件优化
  • 减少电池消耗

总结

性能优化是个持续的过程。从小事做起：压缩资源、优化图片、减少请求。定期用工具检查，保持网站快速加载。