现代图片性能优化及体验优化指南

Picture 标签

<picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在 <img> 元素占据的空间中。

如果我们用img标签，那还需要通过js来判断图片格式来手动改写type属性。

懒加载及异步图像解码方案

链接

1. 通过 onscroll 事件与 getBoundingClientRect API 实现图片的懒加载方案
   • 监听元素图片距离视口顶部的距离
2. 通过 Intersection Observer（交叉观察器）实现比监听 onscroll 性能更佳的图片懒加载方案
   • 监听元素的 isIntersecting 属性，判断元素是否在可视区内，能够实现比监听 onscroll 性能更佳的图片懒加载方案
3. 通过 content-visibility: auto 实现图片资源的延迟渲染
   • content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。利用 content-visibility 的特性，我们可以实现如果该元素当前不在屏幕上，则不会渲染其后代元素。
   • 但是该方案并不能真正意义上实现图片懒加载，因为即使元素未渲染，对图片的网络请求还是会一开始就发送。
   • content-visibility: auto 无法直接替代图片懒加载，设置了 content-visibility: auto 的元素在可视区外只是未被渲染，但是其中的静态资源仍旧会在页面初始化的时候被全部加载。因此，它更像是一个虚拟列表的替代方案。
4. 通过 loading=lazy HTML 属性实现图片懒加载
   • 除了 IE 系列浏览器，目前都支持通过 loading 属性实现延迟加载。此属性可以添加到 <img> 元素中，也可以添加到 <iframe> 元素中。
   • 属性的值为 loading=lazy 会告诉浏览器，如果图像位于可视区时，则立即加载图像，并在用户滚动到它们附近时获取其他图像。
5. 通过 decoding=async HTML 属性实现图片的异步解码
   • decoding 属性用于告诉浏览器使用何种方式解析图像数据。
     • sync: 同步解码图像，保证与其他内容一起显示。
     • async: 异步解码图像，加快显示其他内容。
     • auto: 默认模式，表示不偏好解码模式。由浏览器决定哪种方式更适合用户。