Web 性能优化：首屏加载速度提升 10 个技巧

性能优化是前端开发的重要课题。本文介绍 10 个实用的性能优化技巧。

1. 资源压缩

// Vite 自动压缩
// vite.config.js
export default defineConfig({
  build: {
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router']
        }
      }
    }
  }
})

2. 代码分割

// 路由懒加载
const routes = [
  {
    path: '/user',
    component: () => import('./views/User.vue')
  }
]

3. 图片优化

<!-- 使用 WebP 格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="图片">
</picture>

<!-- 懒加载 -->
<img loading="lazy" src="image.jpg" alt="图片">

4. CDN 加速

<!-- 使用 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

5. 缓存策略

// Service Worker 缓存
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
})

6. 预加载

<!-- 预加载关键资源 -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="preload" href="style.css" as="style">

<!-- 预连接 -->
<link rel="preconnect" href="https://cdn.example.com">

7. 减少重排重绘

// ❌ 多次操作 DOM
element.style.width = '100px';
element.style.height = '100px';
element.style.margin = '10px';

// ✅ 批量操作
element.style.cssText = 'width:100px;height:100px;margin:10px';

// ✅ 使用 class
element.classList.add('resized');

8. 虚拟列表

// 只渲染可见区域
const visibleItems = items.slice(startIndex, endIndex);

9. Web Workers

// 复杂计算放到 Worker
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = e => console.log(e.data);

10. 监控性能

// Performance API
const timing = performance.timing;
const loadTime = timing.loadEventEnd - timing.navigationStart;
console.log('页面加载时间:', loadTime);

性能指标

总结

性能优化是持续的过程。通过资源压缩、代码分割、懒加载、CDN 等手段，可以显著提升页面加载速度。