来源：https://medium.com/bbc-design...title:Nativelazyloadinghasarrived!作者：AndyPotts（BBC软件工程师）日期：2019-08-12致从未见过使用该词的人本机延迟加载：谷歌上周在Chrome76版中引入了本机延迟加载，现在您可能想知道：“什么是本机延迟加载，值得添加到我的网站吗？”好的，这正是我在谈论我的经验时想为您回答的问题。什么是延迟加载？延迟加载是指在用户需要时加载资源（如图片资源）来提高性能。例如，当用户访问你的网站时，它会在进入视图时（即用户可以看到的时候）加载当前视图所需的图片，而不是在页面一开始就加载所有图片。这很好，因为用户并不总是需要查看页面底部的图像，那么为什么要让我们的用户加载所有不必要的图像呢？以前，如果我们要实现延??迟加载，我们必须引入一个库或编写一些JavaScript来检查元素相对于用户视图的位置，并在必要时加载相应的资源（即当用户移动到对应位置）。听起来实施起来有点复杂，不是吗？原生延迟加载是谷歌浏览器内置的一种新的解决方案，这意味着无需编写额外的JavaScript即可实现延迟加载（并大大提高了网站的性能）。原生懒加载使用起来非常简单，只需要在或iframe标签中添加loading属性即可。听起来不错，不是吗？但它真的值得实施吗？我决定在BBC的一款内部产品上实施原生延迟加载，该产品每天有大约3,000名活跃用户。该网站涉及最常见的操作之一-将呈现最多100张图像的列表的查询-我认为这似乎是尝试本机延迟加载的完美场所。那么，值得添加到我们的网站吗？是的！将loading属性添加到图像可将快速网络连接上的图像加载时间减少约50%-从大约1秒减少到<0.5秒，并节省多达40个对服务器的请求？。全部·这些性能提升只是给一堆图片加一个属性而已！示例现在我们已经了解了它的功能，让我们看看它是如何工作的。我将介绍如何为图像实现本机延迟加载。很简单——在image标签中添加一个值为lazy的loading属性，告诉浏览器延迟加载图片，指定图片的宽高可以避免页面重排。（因为顺丰不能显示iframe，所以放链接）https://codepen.io/andypotts/...总而言之，使用本机延迟加载是为用户提供真正的增量性能增强的最简单方法之一。这不是一个完美的解决方案，但如果您还没有使用延迟加载并且有很多图像/iframe，那么绝对值得尝试-特别是因为它很容易实现！不幸的是，原生延迟加载并不是灵丹妙药。杀招、王牌等）。由于原生延迟加载是一种新的浏览器特性，目前缺乏浏览器支持，因此必须使用polyfill或fallbackJavaScript解决方案来支持其他浏览器。您可以在caniuse.com上的支持本机延迟加载的浏览器中找到更多详细信息。（可以看出兼容性很差，还是老老实实写JS来判断吧233）另外值得注意的是不能使用原生懒加载来加载背景图，所以如果背景图用的比较多，可能需要考虑使用JavaScript替代方法来延迟加载背景图像。享受延迟加载的乐趣！
