使用延迟加载会使我的网页显示得更快吗?

Will using Lazy Loading make my webpage appear quicker

本文关键字：网页 延迟加载 我的 显示      更新时间：2023-09-26

我正在创建一个网页，该网页将包含 120 个项目（图像 + 描述 + 链接），每个项目都显示在固定大小的div 中。

如果我在 HTML 中只包含 30 个项目，将空白（固定大小的div）放在其他 90 个项目的位置，并在用户向下滚动页面时加载其他div 的内容，页面的呈现速度会更快吗？

我认为这种延迟加载的可能优点可能是：

  • HTML文件小于原始大小的50%（但是，这可能会影响加载速度，因为我希望浏览器在加载后立即显示最顶层的元素）

  • 前 30 张图像的加载速度会更快，因为它们不会与其他 90 张图像竞争。

这些假设是否有效？页面呈现速度会更快吗？还有什么相关的？（例如，一开始较少的 DOM 元素、JavaScript 开销等）

嗯，是也不是...

由于文档较小，页面可能会

稍微早一点开始呈现，并且由于元素较少，呈现页面的时间可能会稍短一些，但这两个元素都不太可能引起注意。

图像加载速度不会更快，因为页面上的图像较少。来自同一主机的同时加载数仍远低于您最初计划加载的 30 个映像。图像通常会从顶部开始加载，因此对于顶部图像，您不会注意到与任何页面下方丢失的图像有任何区别。

相关的是浏览器在开始呈现实际页面之前必须加载和运行多少。例如，在页面头部加载的任何 Javascript 文件都必须加载并运行，然后浏览器才能呈现任何内容。

我会

说页面会渲染得更快，并且感觉使用起来更快。

但是，您还可以尝试其他方法：

  • 我想你已经优化了你的图像开始？
  • 如果有一个"上一个"页面，您可以在后台预加载图像，以便在用户到达此页面时已经缓存它们？
  • 也许您可以将所有图像组合成一个大图像（单个http请求），并使用CSS分别剪切/定位它们
相关文章：