前端性能优化，图片懒加载和预加载

前端性能优化中，图片懒加载和预加载是两种互补的技术，分别通过延迟加载非关键资源和提前加载关键资源来提升页面性能。

图片懒加载

图片懒加载的核心思想是延迟加载当前视口外的图片，仅在用户滚动到可视区域时再加载，从而减少初始页面加载时的网络请求和资源消耗。

实现原理
通过设置图片的src属性为占位图（如1x1像素的透明图或SVG占位符），并将真实图片地址存储在自定义属性（如data-src）中。
监听页面滚动事件或使用IntersectionObserver API检测图片是否进入视口。
当图片进入视口时，将data-src的值赋给src属性，触发图片加载。
代码示例（IntersectionObserver实现）
<img class="lazy" data-src="real-image.jpg" src="placeholder.svg" alt="示例图片"><script> const lazyImages = document.querySelectorAll('.lazy'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); // 加载后停止观察 } }); }); lazyImages.forEach(img => observer.observe(img));</script>
优势
减少首屏加载时间：避免一次性加载所有图片，尤其适用于图片较多的页面（如电商列表、相册）。
节省带宽：用户可能不会浏览所有图片，懒加载可减少不必要的网络请求。
注意事项
SEO友好性：需确保搜索引擎能抓取真实图片，可通过服务端渲染（SSR）或预渲染技术解决。
占位图设计：使用合适的占位图（如低质量图片占位、模糊化处理）可提升用户体验。
兼容性：IntersectionObserver在旧版浏览器中需polyfill支持。

（懒加载通过延迟加载非视口图片减少初始资源消耗）图片预加载

图片预加载的核心思想是提前加载用户可能即将访问的关键资源（如首屏图片、悬停效果图、轮播图下一帧），以减少用户等待时间。

实现方式
HTML预加载：通过<link rel="preload">标签在HTML头部声明需要预加载的资源。
<link rel="preload" as="image" href="critical-image.jpg">
JavaScript动态预加载：通过创建Image对象提前加载图片。
const preloadImage = new Image();preloadImage.src = 'next-slide.jpg';
CSS预加载：使用background-image属性结合visibility: hidden隐藏预加载元素。
适用场景
首屏关键图片：如英雄区域（Hero Section）的背景图。
用户行为预测：如鼠标悬停时显示的放大图、轮播图的下一帧。
离线应用：通过Service Worker预加载资源以支持离线使用。
优势
提升用户体验：关键资源已加载完成，用户操作时无需等待。
减少感知延迟：尤其适用于高延迟网络环境（如移动端）。
注意事项
资源优先级：避免过度预加载非关键资源，否则可能占用带宽并影响首屏性能。
缓存利用：预加载的资源应被浏览器缓存，避免重复加载。
预加载时机：需平衡预加载的收益与成本（如网络带宽、内存占用）。

（预加载通过提前加载关键资源减少用户等待时间）懒加载与预加载的结合使用

两者可结合使用以实现更精细的性能优化：

示例场景：

（懒加载与预加载结合实现按需加载与关键资源优先加载）总结

热门标签