延迟加载是将资源或对象的加载或初始化延迟到实际需要它们以提高性能和节省系统资源的做法。例如，如果一个网页有一张图片，用户必须向下滚动才能看到，你可以显示一个占位符，并且只有当用户到达它的位置时才可以延迟加载完整的图片。推荐阅读：《什么是延迟加载？延迟加载与预加载》
延迟加载的好处包括：
减少初始加载时间 – 延迟加载网页可减少页面重量，从而缩短 页面加载时间。
带宽节约 – 延迟加载通过仅在用户请求时才向用户交付内容来节约带宽。
系统资源节约 ——延迟加载既节约了服务器资源，也节约了客户端资源，因为实际上只需要渲染或执行部分图像、JavaScript 和其他代码。
延迟加载 vs. 急切加载
延迟加载会延迟资源的初始化，而急切加载会在代码执行后立即初始化或加载资源。预加载还涉及预加载资源引用的相关实体。例如，带有 include 语句的 PHP 脚本执行预加载——一旦执行，预加载就会拉入并加载包含的资源。
当有机会或需要在后台加载资源时，快速加载是有益的。例如，某些网站会显示“正在加载”屏幕并急切加载 Web 应用程序运行所需的所有资源。
延迟加载实现方法
有几个开源库可用于实现延迟加载，包括：
blazy.js – blazy.js 是一个轻量级的 JavaScript 库，用于延迟加载和多服务图像、iframe、视频和其他资源。
LazyLoad – LazyLoad 是一个脚本，可在图像进入视口时自动加载图像。
在代码中实现延迟加载的方法包括：
延迟初始化 – 此方法将对象设置为 null。对象数据仅在调用它们之后和每次调用时加载，检查是否为空，如果是，则加载对象数据。
虚拟代理 ——访问对象时，调用与真实对象具有相同接口的虚拟对象。当虚拟对象被调用时，加载真实对象，然后委托给它。
Ghost – 仅使用标识符加载处于部分状态的对象。第一次调用对象上的属性时，加载完整数据。
值持有者 ——创建一个处理延迟加载行为的通用对象。此对象应出现在对象的数据字段的位置。
延迟加载图片
要延迟加载图像，请显示轻量级占位符图像，并在滚动时替换为真实的全尺寸图像。
延迟加载图像有几种技术方法：
内嵌
标签，如果图像在视口中，则使用 JavaScript 填充标签
事件处理程序，例如 scroll 或 resize
该 路口观察API
CSS 背景图像属性
延迟加载视频
要延迟加载不自动播放的视频，您可以使用 HTML5 视频标签的 preload 属性。
对于自动播放的视频，谷歌浏览器会自动提供延迟加载。在其他浏览器中，您需要在 video 标签中声明以下属性：
<视频自动播放静音循环播放宽度=”xx”高度=”xx”海报=”placeholder-image.jpg”>
延迟加载最佳实践
执行延迟加载时，请考虑以下提示：
仅延迟加载显示在折叠下方或用户视口之外的资源。在代码中，仅延迟加载初始或基本系统操作不需要的对象。
延迟加载图像时，请在将其插入 DOM 之前使用 JavaScript decode() 方法对其进行异步解码。否则，大图像可能会导致浏览器冻结。
在图像或对象无法加载的情况下处理错误。
提供一个 noscript 以防 JavaScript 不可用。否则禁用 JavaScript 的用户将看不到任何延迟加载的资源。
延迟加载和 CDN
延迟加载和内容交付网络(CDN)，例如 Imperva 的 CDN，是缩短页面加载时间和优化最终用户体验的两种方法。CDN 有助于将资源放置在 靠近用户的 缓存服务器上，从而使他们能够更快地访问它。
在网站性能优化方面，延迟加载与 CDN 相比如何?
延迟加载避免了不必要的资源下载或代码执行。然而，当用户实际请求大量或大量资源时，它无济于事。
CDN 缓存资源并可以更快地为用户提供服务——但它可能会传输用户实际上并不需要的不必要的资源。
最佳解决方案是将这两种技术结合起来——通过在通过 CDN 提供资源的同时实现延迟加载，您可以确保仅下载用户实际需要的资源，并且当用户实际需要资源时，它会被缓存并快速交付。推荐相关阅读：《什么是CDN,以及工作原理和构建块》