前端性能优化：懒加载、代码分割与缓存策略
优化前端性能可显著提升用户体验。
1. 图片懒加载（Intersection Observer）
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));2. 路由级代码分割（React）
import { lazy, Suspense } from 'react';
const Home = lazy(() => import('./Home'));
function App() {
return <Suspense fallback={<div>加载中...</div>}><Home /></Suspense>;
}3. 动态 import
button.addEventListener('click', async () => {
const module = await import('./heavy-module');
module.default();
});4. 缓存策略
- Service Worker 缓存静态资源。
- 设置 HTTP 缓存头（Cache-Control）。
性能优化是前端开发的重要一环。
