使用 Intersection Observer 进行图片懒加载 图片懒加载（Lazy Loading）可以提升页面加载速度，减少首屏渲染时间。
js 复制 编辑 const images = document.querySelectorAll("img.lazy"); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = entry.target.dataset.src; observer.unobserve(entry.target); } }); });
images.forEach(img => observer.observe(img));
html
复制
编辑
4. 使用 PWA 提高页面加载速度
渐进式 Web 应用（PWA, Progressive Web Apps） 可以通过 Service Worker 缓存页面，提高离线体验。
js 复制 编辑 // 注册 Service Worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(() => console.log('Service Worker Registered')); } 总结 优化前端性能需要从关键渲染路径、资源加载、代码拆分等多个方面入手。通过合理使用懒加载、缓存、异步 JS 等技术，可以大幅提高网站的加载速度和用户体验。
