如今，为了提升应用性能，在web应用中广泛使用了懒加载。它可以帮助开发人员减少网站加载时间、节省流量并改善用户体验。但是过度使用延迟加载会对应用程序性能产生负面影响。所以在本文中，我将详细介绍延迟加载对性能的影响，以帮助您了解何时使用它。什么是延迟加载？延迟加载是一种常用的技术，通过按需加载资源_前端训练来减少网页的数据使用。延迟加载现在是一个web标准，大多数主流浏览器都支持使用loading="lazy"属性进行延迟加载。//使用img标签//使用IFrame/iframe>启用延迟加载后，只有当用户滚动到需要显示内容的地方时才会加载。延迟加载绝对可以提升应用性能和用户体验，这也是为什么它成为了开发者在开发应用时首选的优化方式。但是延迟加载并不总是能保证提高应用程序性能。那么我们来看看延迟加载对性能有什么影响。延迟加载对性能的影响许多研究表明，开发人员可以通过延迟加载实现两个优势。减少页面加载时间(PLT)：通过延迟资源加载来减少首屏页面加载时间。优化资源消耗：通过资源延迟加载优化系统资源使用，这在内存和处理能力较低的移动设备上效果更好。另一方面，过度使用延迟加载会对性能产生一些明显的影响。放慢快速滚动如果您有一个Web应用程序，例如在线商店，您需要允许用户快速上下滚动和导航。对此类应用程序使用延迟加载会减慢滚动速度，因为我们需要等待数据加载。这会降低应用程序性能并导致用户体验问题。由于内容更改而导致的延迟如果您没有为延迟加载的图像定义宽度和高度属性，则图像渲染会出现明显的延迟。因为在页面初始化时没有加载资源，所以浏览器不知道适合页面布局的内容尺寸。一旦内容被加载并且用户滚动到特定视图，浏览器需要处理内容并再次更改页面布局。这取代了其他元素，也造成了糟糕的用户体验。内容缓冲如果您在应用程序中使用不必要的延迟加载，这将导致内容缓冲。当用户在资源仍在下载时快速向下滚动时会发生这种情况。这种情况尤其发生在低带宽连接上，这会影响网页呈现速度。何时使用延迟加载您现在一定在考虑如何正确使用延迟加载以最大限度地发挥其效果并创造更好的Web性能。这里有一些建议可以帮助您找到最佳起点。1.在正确的地方延迟加载正确的资源如果你有一个冗长的网页需要大量的资源，你可以考虑使用延迟加载，但仅限于用户视图之外或折叠的内容。确保您没有延迟加载后台任务执行所需的资源，例如JavaScript组件、背景图像或其他多媒体内容。此外，您不得延迟这些资源的加载。您可以使用GoogleChrome的Lighthouse工具来检查和识别可以延迟加载的资源。2.不妨碍网页使用的内容延迟加载延迟加载最好用于不重要的非必要的网页资源。此外，如果资源未按预期延迟加载，请不要忘记错误处理和提供良好的用户体验。请注意，原生延迟加载仍未得到所有平台和浏览器的普遍支持。此外，如果您使用的是库或自定义JavaScript，这并不适用于所有用户。特别是，禁止JavaScript的浏览器将面临延迟加载的技术问题。3.延迟加载对SEO不重要的资源随着内容的延迟加载，站点会逐渐呈现，这意味着某些内容在首屏加载时不可用。乍一看，延迟加载似乎有助于提高SEO页面排名，因为它使页面加载速度更快。但是如果过多地使用延迟加载，就会产生一些负面影响。搜索引擎优化索引时，搜索引擎抓取网站以抓取数据以索引页面，但由于延迟加载，网络爬虫无法获取所有页面数据。除非用户与页面交互，否则SEO不能忽略此信息。但是作为开发者，我们不希望SEO遗漏我们重要的业务数据。所以我建议不要对面向SEO的内容使用延迟加载，例如关键字或业务信息。文章转载自前端开发爱好者
