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

Question

我正在创建一个网页，其中包含 120 个元素(图片 + 描述 + 链接)，每个元素都显示在一个固定大小的 div 中。

如果我在 HTML 中只包含 30 个元素，用空白(固定大小的 div)代替其他 90 个，并在用户向下滚动页面时加载其他 div 的内容，页面呈现速度是否会更快？

我认为这种延迟加载的可能优势可能是:

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

  <

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

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

Answer 1

好吧，是和不是...

由于文档较小，页面开始呈现的时间可能会稍早一些，并且由于元素较少，呈现页面的时间可能会稍短一些，但这些都不太可能被注意到。

图像不会加载得更快，因为页面上的图像较少。从同一主机同时加载的数量仍然比您最初计划加载的 30 个图像低很多。图片通常会从顶部开始加载，因此您不会注意到顶部图片与任何页面下方缺失的图片有任何区别。

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