当前位置：首页 > news >正文

优化 Web 性能：处理屏幕外图片（Offscreen Images）

news 来源：原创 2025/6/22 20:25:41

在 Web 性能优化中，图片资源的管理是一个关键环节。Google 的 Lighthouse 工具在性能审计中特别关注“延迟加载屏幕外图片”（Defer Offscreen Images），旨在减少不必要的图片加载，从而提升页面加载速度和用户体验。本文将基于 Chrome 开发者文档，深入探讨屏幕外图片的定义、影响及优化方法，助你在2025年的 Web 项目中打造更高效的前端应用。

1. 什么是屏幕外图片？

1.1 定义

屏幕外图片（Offscreen Images）是指在页面初始加载时位于用户视口之外、不立即可见的图片。这些图片通常位于页面底部或需要滚动才能看到的区域。

1.2 为什么需要关注？

默认情况下，浏览器会立即加载页面中的所有 <img> 标签引用的图片，即使它们不在首屏范围内。这会导致：

带宽浪费：下载用户暂时看不到的资源。
加载延迟：延长“首次内容绘制”（FCP）和“最大内容绘制”（LCP）。

1.3 Lighthouse 的检测

Lighthouse 分析页面加载时哪些图片不在视口中，并计算延迟加载它们可以节省的字节数和时间。

2. 屏幕外图片的影响

2.1 性能瓶颈

加载大量屏幕外图片会增加初始页面加载的网络请求数和数据量，尤其在移动设备或低速网络下，影响尤为明显。

2.2 用户体验

用户需要等待更长时间才能看到首屏内容。
不必要的资源加载可能耗尽移动数据流量。

2.3 Lighthouse 得分

报告中的“延迟加载屏幕外图片”项会列出潜在节省的资源大小，直接影响性能得分。

3. 如何识别屏幕外图片？

3.1 使用 Lighthouse

打开 Chrome 开发者工具（F12）。
切换到“Lighthouse”选项卡。
选择“性能”类别，生成报告。
查看“机会”（Opportunities）下的“延迟加载屏幕外图片”，列出具体图片及其节省字节量。

3.2 手动检查

使用开发者工具的“元素”面板，滚动页面检查 <img> 标签。
在“网络”面板中观察图片加载时间和位置。

4. 优化屏幕外图片的策略

4.1 使用原生延迟加载

HTML5 提供了 loading="lazy" 属性，让浏览器自动延迟加载屏幕外图片：

<img src="image.jpg" loading="lazy" alt="延迟加载图片">

工作原理：浏览器仅在图片接近视口时才加载。
兼容性：Chrome、Firefox 等现代浏览器广泛支持（2025年已全面普及）。

4.2 自定义延迟加载（Intersection Observer）

对于需要更精细控制或兼容旧浏览器的场景，使用 Intersection Observer API：

<img data-src="image.jpg" alt="延迟加载图片" class="lazy">
<script>
    const images = document.querySelectorAll('.lazy');
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    images.forEach(img => observer.observe(img));
</script>

优点：灵活性高，可结合其他逻辑（如预加载）。
回退：为不支持的浏览器提供 polyfill。

4.3 占位符技术

在图片加载前使用低质量占位符（LQIP）或纯色背景：

<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="带占位符的图片">

提升感知性能，用户不会看到空白。

4.4 结合响应式图片

确保延迟加载的图片也适配设备：

<img src="small.jpg"
     srcset="small.jpg 320w, large.jpg 1280w"
     sizes="(max-width: 600px) 100vw, 50vw"
     loading="lazy"
     alt="响应式延迟加载图片">

4.5 构建工具优化

使用现代构建工具（如 Webpack、Vite）自动处理：

Webpack：结合 lazyload 插件。
Vite：使用 vite-plugin-image-optimizer 添加 loading="lazy"。

5. 示例：优化前后对比

优化前

<html>
<body>
    <h1>首屏内容</h1>
    <!-- 以下图片在屏幕外 -->
    <img src="large-image1.jpg" alt="图片1">
    <img src="large-image2.jpg" alt="图片2">
</body>
</html>

页面加载时立即下载所有图片，总计 2MB。

优化后

<html>
<body>
    <h1>首屏内容</h1>
    <img src="large-image1.jpg" loading="lazy" alt="图片1">
    <img src="large-image2.jpg" loading="lazy" alt="图片2">
</body>
</html>