前端性能优化实战技巧

全面的前端性能优化策略和实践方案。

1. 资源加载优化

<!-- 预加载关键资源 -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

2. 图片优化

// 懒加载实现
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src
      observer.unobserve(entry.target)
    }
  })
})

3. 代码分割

// 路由懒加载
const Home = React.lazy(() => import('./Home'))
const About = React.lazy(() => import('./About'))

4. 缓存策略

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