对于从未看到过原生懒加载这个术语的人：

谷歌上周发布了 Google introduced native lazy loading to Chrome version 76

现在你可能会想知道：“什么是原生懒加载，它是否值得添加到我的网站上？”好的，这正是我希望为你解答的问题，因为我会谈谈我使用它的经验。

什么是懒加载？

懒加载是指通过在用户需要时加载资源（例如图像资源）来提高性能。举个例子，当用户访问你的网站的时候，它会在进入视图的时候（就是在用户可以看见的时候）加载当前视图所需要的图像，而不是在页面最初加载所有图像。这是很有好处的，因为用户不需要总是看在页面底部的图像，所以为什么要让我们的用户加载所有不必要的图像呢？

以前，如果我们想要实现懒加载，我们必须导入一个库或编写一些 JavaScript 来检查元素相对于用户视图的位置，必要时（就是用户移动到对应位置的时候）再加载对应的资源。听起来实现起来有一点复杂，不是吗？

原生懒加载是 Google 浏览器新的内置解决方案，这意味着不需要编写额外的 JavaScript 来实现懒加载（并且极大地提高了网站的性能）。原生懒加载使用起来十分简单，只需要通过添加loading属性到 <image>或 iframe 标签上就可以实现。

听起来很不错，不是吗？但它实际上值得实施吗？

我决定在BBC的一个内部产品上实现原生懒加载技术，这个网站每天有大约 3,000 名活跃用户。这个网站上涉及一个最常见的操作——查询，该查询将呈现一个最多100个图像的列表 -——我认为这似乎是尝试原生懒加载的理想场所。

所以，它值得添加到我们的网站上吗？是的！将loading属性添加到图像上会使图像在一个快速的网络连接环境上的加载时间减少约 50％ —— 从约 1 秒到 <0.5 秒，以及最多可以向服务器保存 40 个请求

链接: https://fly63.com/article/detial/4791