谷歌浏览器新原生视频音频懒加载或提升网页速度

Google Chrome 及其他基于 Chromium 的浏览器，包括 Edge 和 Vivaldi，很快将支持视频和音频的原生懒加载。此变更由独立开发者 Helmut Januschka 提出，他以往对 Chromium 有过贡献。

懒加载功能在 Chrome 中已存在多年，但此前原生支持仅限于图片和 iframe，尚不支持视频和音频。该状况即将改变，基于 Chromium 的浏览器将原生支持视频和音频懒加载，特别是对于包含大量媒体的网页，将提升浏览速度。

对于不了解的人来说，网站上的图片或视频懒加载意味着，当你在 Chrome 或其他浏览器中访问时，浏览器渲染页面时不会立即获取或完全初始化这些媒体。视频或图片只在你滚动到它们所在区域时加载。

没有懒加载的话，Chrome 可能会提前加载媒体，导致网站速度变慢，因为浏览器需要先下载页面上的所有内容。使用 loading="lazy" 后，Chrome 会等你滚动到嵌入视频的区域才加载该视频。如果你没滚动到那里，媒体可能永远不会被加载。

大多数网站已经通过 JavaScript 实现了视频和音频的懒加载，效果不错，但从性能角度看并非最佳实践，因为它不能很好地与浏览器的原生预加载扫描器和内置加载策略整合。

“没有原生支持，开发者必须用 Intersection Observer 实现自定义 JavaScript 方案，检测媒体元素进入视口后动态设置 src 属性，”开发者 Helmut Januschka 在 Chrome 状态页面写道。“这种方法易出错，增加复杂性，且无法与浏览器的预加载扫描器整合。”

据 Windows Latest 首次发现，Helmut Januschka 的方案是在 Chromium 中为视频和音频添加完整的原生懒加载，类似于图片和 iframe 的做法。

该功能在 Chrome 稳定版推出后，开发者可以直接在 或 标签上使用 loading="lazy" 属性。

这意味着视频和音频将原生懒加载，而不依赖 JavaScript，避免性能瓶颈或与 Chrome 预加载扫描器不兼容的问题。

Januschka 指出：“原生懒加载允许浏览器基于网络状况优化资源加载，正确处理自动播放和预加载属性的交互，避免离屏媒体阻塞 window.onload。”

Januschka 在提案中解释：“这与当前对<img>和<iframe>元素的懒加载行为一致，提高页面加载性能并减少数据使用。”

Windows Latest 发现 Chromium 于今年一月首次实现了视频和音频的原生懒加载，二月完成变更，三月底进入发布流程。

现在，有新的代码更改默认在稳定版启用该功能，暗示它将在 Chrome 148 版本广泛推出。