测试文章 08 - 前端性能优化实战

1
<!-- 使用现代格式 -->
2
<picture>
3
  <source srcset="image.avif" type="image/avif">
4
  <source srcset="image.webp" type="image/webp">
5
  <img src="image.jpg" alt="描述" loading="lazy">
6
</picture>

1
// React 懒加载
2
const LazyComponent = React.lazy(() => import('./HeavyComponent'));
3

4
// Vue 异步组件
5
const AsyncComp = defineAsyncComponent(() =>
6
  import('./HeavyComponent.vue')
7
);

1
import { VirtualList } from 'react-window';
2

3
<VirtualList
4
  height={500}
5
  itemCount={10000}
6
  itemSize={50}
7
  width="100%"
8
>
9
  {Row}
10
</VirtualList>

1
// 防抖 - 搜索输入
2
const debouncedSearch = debounce((query) => {
3
  searchAPI(query);
4
}, 300);
5

6
// 节流 - 滚动事件
7
const throttledScroll = throttle(() => {
8
  updateScrollPosition();
9
}, 100);

1
// 缓存静态资源
2
workbox.routing.registerRoute(
3
  ({ request }) => request.destination === 'image',
4
  new workbox.strategies.CacheFirst({
5
    cacheName: 'images',
6
    plugins: [
7
      new workbox.expiration.ExpirationPlugin({
8
        maxEntries: 60,
9
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30天
10
      }),
11
    ],
12
  })
13
);