今天的网站充斥着大量的媒体资源，例如图片和视频。图片约占网站平均流量的50%。然而，这些图像大多没有机会进入用户的视野，因为它们位于网站页面的首页之外。当你看到这篇文章的标题时，你会问“什么是延迟加载？”CSS-Tricks网站上有很多关于延迟加载的文章，其中有一篇非常详细的《用 JavaScript 花式实现懒加载的指南文档》。简而言之，我们所说的是一种延迟加载Web资源的机制，即Web内容按需加载，或者更直白地说，当Web内容出现时加载。这样做有什么好处？压缩初始页面的大小以提高加载速度；避免浪费对用户永远不会看到的内容的网络请求。如果你之前看过其他关于懒加载的文章，你就会明白，我们不得不借助各种方法来实现懒加载。而当原生HTML使用loading特性来支持懒加载功能时，又是另外一个村子了。目前只有Chrome支持加载功能，但有望全面开花。Chrome目前正在开发和测试对原生懒加载特性的支持，预计在2019年9月上旬发布的Chrome77中可以使用。（无论是借助第三方库还是从头手写）来实现延迟加载。大多数懒加载库的原理是服务器返回的HTML响应包含一个初始的img元素，没有src属性，这样浏览器就不会加载任何数据。图片的链接地址放在img元素的其他特征上，比如data-src。然后加载一个懒加载库并运行。这个懒加载库会一直记录用户滚动页面的行为，并告诉浏览器加载正在加载的图片滚进用户的视野。加载方式是将data-src属性的值赋值给原本为空的src属性。我们一直在用这种方式来实现lazy加载。但这不是理想的方法。这种方法的一个明显问题是要显示网站页面，必须经过几个关键步骤。一共三步，必须依次执行：加载初始HTML响应内容加载懒加载库加载图片如果在首页的图片上采用这种懒加载技术，在加载过程中会出现页面闪烁，开始绘制时，页面上没有图像（闪烁发生在第1步或第2步之后，取决于加载库的脚本是使用defer还是async），懒加载库生效后图像延迟到达。它还会给用户一种页面加载缓慢的错觉。另外，懒加载库本身也会占用带宽和CPU算力。并且不要忘记，如果用户禁用了JavaScript（现在是2019年，我们不关心这个，对吧？），那么延迟加载库将不起作用。哦，那些依赖RSS来传送其内容（如CSS-Tricks）的网站呢？如果初始页面上没有加载图像，则该页面的RSS版本将永远不会显示图像。所有这些种类，等等。本机延迟加载来拯救！上文提到，Chromium开发团队和GoogleChrome开发团队从Chrome75开始，加载了loading特性支持的原生懒加载功能。稍后我们将讨论此功能及其值，但让我们先在浏览器中启用此功能以了解情况。启用原生延迟加载从Chrome75开始，我们可以切换两个开关来手动启用延迟加载。预计从Chrome77（计划于2019年9月发布）开始默认启用此功能。在Chromium或ChromeCanary中打开chrome://flags。搜索关键字懒惰。激活“启用延迟图像加载”和“启用延迟帧加载”。单击屏幕右下角的按钮以重新启动浏览器。↑↑↑示意图：谷歌浏览器中的原生延迟加载切换↑↑↑打开JavaScript控制台（按F12）查看是否已成功激活延迟加载。如果激活成功，您将看到如下警告消息：[Intervention]Imagesloadedlazilyandreplacedwithplaceholders。加载事件被推迟。？让我们一起了解有关加载的更多信息。loading属性img和iframe元素都支持loading属性。请记住，loading属性的值不是浏览器严格执行的命令，而是帮助浏览器决定是否延迟加载图像或框架。loading属性的三个可能取值如下所述。在下面的每张图片下方，您可以看到一个表格，列出了每个图片资源的加载时间。Rangerequest（译者注：原词是Rangeresponse，疑似错别字）是指请求对图像的一部分进行预检，以确定图像文件的大小（详见原理）。如果该栏中有内容，则浏览器成功发出范围请求。请注意startTime列，它指示在解析DOM后图像加载延迟了多长时间。您可以使用强制刷新(CTRL+Shift+R)重新触发范围请求。默认值：auto↑↑↑示意图：自动加载汽车模型照片↑↑↑指标/请求#1encodedBodySize20718字节decodedBodySize20718字节transferSize0字节startTime54msrequestStart592msresponseStart596msresponseEnd601mstimeToFirstByte4msdownloadDuration5ms将加载设置为自动（或将其留空：loading=""）允许浏览器决定是否延迟加载图像。决定是否延迟加载会考虑很多因素，比如平台和是否处于DataSaver模式（译者注：Chrome已于2019年5月6日弃用此功能）、网络状况、图片大小、是否为图片或iframe，以及CSS的显示属性等（有关考虑这些因素的原因，请参见此处。)eagerness的值：eager↑↑↑示意图：急切加载图像↑↑↑指标/请求#1encodedBodySize24019字节decodedBodySize24019字节transferSize0字节startTime54msrequestStart592msresponseStart600msdownresponseEnd605mstimeToFirstByteloadmsDuration7mseagertells需要立即加载图像的浏览器。如果加载被延迟了（比如初始值为lazy，后来用JavaScript改为eager），那么浏览器也应该立即加载图片。惰性值：lazy↑↑↑Diagram:Lazyloadinglazycatmap↑↑↑Metrics/Request#1encodedBodySize12112bytesdecodedBodySize12112bytestransferSize0bytesstartTime54msrequestStart593msresponseStart599msresponseEnd604ms5mstimeToFirstdownloadDuration6mslazytells浏览器认为应该延迟加载此图像。延迟加载到底有多“懒”应该由浏览器来解释，文档显示，当用户将页面滚动到图片附近时，延迟加载就开始了，这意味着当图片即将进入视野时加载。loading特性的原理不同于基于JavaScript的延迟加载库。原生延迟加载功能使用预检请求获取图像文件数据的前2048字节。浏览器会根据预先获取的数据，尝试判断图片的大小，这样就可以在完整图片的位置插入一个不可见的占位符，防止页面在加载过程中出现闪烁。在第一个（如果图像大小小于2KB，一个预检请求就足够了）或第二个请求之后，它的加载事件将在加载完整图像后立即取消监听。请注意，如果第二个请求未完成，加载事件可能会保持绑定状态。从现在开始，浏览器获取图像的请求数量可能会增加一倍。每个图像对应两个请求：首先是范围请求，然后是完整请求。请确保您的服务器支持HTTPRange:0-2047请求标头，并使用206（部分内容）作为响应状态码，以防止整个图像被发送两次。每个用户都会发送大量的后续请求，因此Web服务器对HTTP/2协议的支持变得越来越重要。现在让我们谈谈延迟内容。Blink是Chrome的渲染引擎，它使用启发式方法来确定哪些内容应该延迟加载以及延迟加载多长时间。ScottLittle在他的设计文档中全面地列出了确定延迟策略的标准。这是识别惰性对象的简短策略：在所有平台上设置loading="lazy"的图像和框架浏览器是Android上的Chrome，启用了数据保护模式；且图片满足以下条件：设置loading="lazy"auto"或loading=""width和height属性的值不小于10px非JavaScript插入的图片满足以下条件：设置loading="auto"或loading=""来自第三方（插入页面不同域名或协议）宽度和高度都大于4像素（防止延迟加载微小的跟踪框架）没有设置display:none或visibility:hidden(防止跟踪帧懒加载)不使用负坐标在屏幕上定位区域外带srcset属性的响应式图片对于带srcset属性的响应式图片，原生懒加载也有效。srcset特性提供了一组图片供浏览器选择的文件，浏览器会根据用户的屏幕尺寸、设备像素比、网络状况等因素，选择最适合情况的图片。图片优化的CDNs喜欢tiny。图片可以实时提供图像替代品，无需后端开发。当时的浏览器支持写的时候，没有浏览器默认支持原生延迟加载。但正如我之前所说，Chrome从77版本开始将默认启用延迟加载。此外，目前还没有浏览器厂商声称支持该功能。（Edge将是一个例外，因为它即将迁移到Chromium核心。）您可以使用几行JavaScript检查是否支持：if("loading"inHTMLImageElement.prototype){//Supported。}else{//不支持。您可能需要包括延迟加载库（如下所列）。请参阅CodePen中ErkStruwe(@erkstruwe)的代码示例：浏览器本机延迟加载支持检测器自动回退到具有模糊图像的JavaScript解决方案大多数基于JavaScript的延迟加载库都有一个很酷的功能：模糊占位符图像(LQIP)。这个特性基本上是利用了这个原理：即使稍后将src属性的值替换为另一个URL，浏览器仍然会在开始时立即加载img元素。这样，我们可以在页面加载时加载一个小的、不清晰的图像，然后用完整的图像替换它。现在我们可以使用这个函数在不支持懒加载的浏览器中模拟原生懒加载的2KB范围请求，以达到和模糊占位图片一样的效果。请参阅CodePen上ErkStruwe(@erkstruwe)的代码示例：原生延迟加载的JavaScript回退和模糊占位符图像功能摘要我对这项新功能感到非常兴奋。原生懒加载能力发布在即，将对全球互联网通信产生非同寻常的影响。即使它只改变了启发法的一小部分，老实说我不明白为什么人们没有给予足够的重视。想一想，随着auto值成为不同Chrome平台的默认选项，世界上最流行的浏览器即将延迟加载视口外的图像和框架。流量的堤坝可能会淹没不太健壮的站点，并且Web服务器可能会被图像嗅探请求淹没。接下来受害的是追踪技术：假设那些值得信赖的追踪像素和追踪框架无法加载，数据分析领域及其周边产业将面临被动局面。我们只能希望他们不要惊慌，不要在每张图片上都添加loading="eager"，这是一个很棒的功能。以这种方式添加加载功能根本不是为网站用户服务的，而且是在浪费金钱。相反，他们应该重写代码以通过启发式方法将其识别为跟踪像素。Web开发人员、数据分析经理和运营经理应立即检查他们的站点，以确保前端支持原生延迟加载，后端支持范围请求和HTTP/2协议。万一原生懒加载功能出现问题，或者你想把图片加载优化到极致（包括自动支持WebP、模糊占位图片等），图片优化CDN可以帮到你。查看tiny.pictures了解更多！
