如果脚本已经在浏览器缓存中，浏览器是否仍会惰性加载该脚本？

Question

我正在使用 lazyload.js 来延迟加载几个脚本。现在我想要使用一个全站包含文件，告诉 lazyload.js 加载网站中使用的 所有 脚本。然后，我可以让浏览器决定这些脚本是否已经在缓存中或者需要加载它们。

这样可以避免在 js 中进行测试，看看某个内容是否已加载 (并且我愿意接受额外请求带来的开销)。这种方法可行吗？我是否忽略了什么重要的事情？

- user1694077

Answer 1

缓存控制该如何处理呢？

<meta http-equiv="cache-control" content="no-cache">

也许这对你来说是正确的选择。在这里可以查阅更多信息。

- Lithilion

---

好的，但为什么要使用“no-cache”？因为我希望浏览器在可能的情况下引用缓存版本。难道不应该是“public”或“private”吗？而且“public”不是已经是默认值了吗？ - user1694077

是的，公共访问是默认设置。但是你知道浏览器会自动使用缓存版本。 - Lithilion

为什么要加上w3fools链接？ - Anshu Dwibhashi

Answer 2

我没有基于硬数据，但我认为可以肯定地说，今天使用的浏览器中大约有75~80%的浏览器很好地缓存了脚本。据我所知，有办法强制浏览器不使用缓存的脚本，但既然这不是你想要的，那就没关系了。

是的，事实上，大多数浏览器会引用缓存的脚本，而不是一遍又一遍地请求文件。当然，有些人担心隐私问题，只会在匿名/隐身模式下浏览网页（也称为色情模式）。
这会导致浏览器在关闭浏览器窗口时清除缓存。
为什么你会关心呢？对我来说，当开发我的JS脚本时，我发现这非常有用。
硬刷新就像按ctrl+c一样。我们都已经养成了按这两个键4~5次的习惯，以确保刷新成功。我注意到我的同事们也会用ctrl+F5来做同样的事情...

- Elias Van Ootegem

---

你确定大多数浏览器在惰性加载脚本之前会检查缓存吗？因为我也收到了某人的答复，说无论如何都会加载所有内容，我现在不知道该相信什么了。 - user1694077

@Samuel：我已经查看了lazyload.js的源代码。它实际上只是创建一个新的DOM元素（脚本标签，请在github上检查第230行），并将其添加到DOM树中。结果的行为与一开始存在标记时相同：浏览器将检查是否对该域具有脚本缓存，如果有，则不会再次请求文件，而是加载缓存版本。如果没有，则会请求该文件。我已经快速查看了其他答案，但我不知道你说的哪个答案会始终执行请求。 - Elias Van Ootegem

我是指底部的Dmitry的回答。但是你的回答恰好解释了我不确定的问题。谢谢！ - user1694077

Answer 3

懒加载并不仅仅是为了节省带宽，还与CPU/电池的节约有很大关系。如果您使用懒加载，在浏览器缓存中或不在其中，您将按需加载它，从而不会浪费执行从未使用过的代码。如果您提前加载所有内容，则每次访问页面都会对CPU和电池产生固定的成本，无论是否使用80％的模块。

为了延长移动设备的电池寿命，最好采用适当的懒加载方法。但对于桌面设备，最好预加载所有内容，因为预加载成本相对较小。

- Craig

Answer 4

我已经看到过它按照你所解释的方式运行，也看到过它没有运行。然而，偶尔会出现双重负载的情况，这将使开销更大。

- spriore

---

谢谢您的回答，但我不理解您最后一句话的意思。您具体是什么意思？ - user1694077

如果你想要赏金，就请给我一个至少还算过得去的答案。如果你的回答仍然是这样的话，我是不会给你赏金的。 - user1694077

我不在乎赏金。其次，当我说它会双重加载时，缓存版本将加载在延迟加载之上。这不会影响JavaScript的工作，但有时可能会根据其长度而减慢速度。 - spriore

抱歉如果我的回复有点过于严厉，只是有时候当我设置悬赏并且还没有任何答案时，人们会试图通过给出一个非常简单的答案来获取悬赏，但不会回复或解释它。但你所说的是这可能会甚至减缓事情的进展... 这太糟糕了。 - user1694077

Answer 5

简而言之：这取决于情况 如果脚本已经存在于缓存中，浏览器很可能不会请求它，除非明确指定。

然而，是否请求脚本完全由浏览器自行决定。

- Anshu Dwibhashi

---

你的问题引起了我的注意 :) @Samuel - Anshu Dwibhashi

好的，谢谢你的回答。所以我想这个问题并不像我想象的那么简单。基本上答案是：取决于情况。 - user1694077

Answer 6

不，这样行不通。

如果你告诉lazyload去加载脚本，那么它会加载脚本。 Lazyload无法访问浏览器缓存，并且无法确定某些资源是否在缓存中。 此外，脚本加载顺序很重要，因此如果先前的javascript文件没有加载，则浏览器无法使用javascript文件。浏览器可以确定javascript文件是否彼此依赖。

如果您考虑仅通过lazyload创建“全部加载”： 最好创建一个JavaScript文件并在页面末尾加载它。

- Dmitry Kaigorodov

---

lazyload 没有访问缓存的权限，这是真的，但是 lazyloadjs 实际上并不会“加载”您的脚本。它创建一个新的 DOM 节点，并将其附加到当前的 DOM 树中。JS 与 DOM 没有任何关系，因此一旦设置了 src 属性，就由浏览器决定如何请求脚本。大多数现代浏览器首先会引用缓存。 - Elias Van Ootegem

你是对的，浏览器会检查所请求的资源（js文件）是否在缓存中。但是如果资源不在缓存中，浏览器将从服务器加载资源。你无法告诉浏览器：“如果文件在缓存中，请加载文件”。你只能告诉它：“加载文件”。然后浏览器会从缓存或服务器加载。lazyload.js也是这样做的：它只是加载js文件。 - Dmitry Kaigorodov

是的，这正是我在我的答案中所说的...文件/资源的加载方式取决于浏览器，大多数浏览器都会缓存脚本...显然，如果它们不在缓存中，它们将按照HTTP请求进行请求...但是你的答案表明它会每次请求所有脚本。至少，这就是OP理解你的答案的方式。 - Elias Van Ootegem

抱歉，我才来第三天。当按下回车键时，它会提交评论。

3. 如果放在页面末尾，它将阻止其他资源的加载。
4. 单个JS文件更容易维护（如果难以导航，则始终可以在部署之前使用concat）。

- Dmitry Kaigorodov

你所说的内容我都已经知道了。我知道如何请求js文件，也知道lazyload.js是做什么的（在回答之前我已经查看了github源代码）。你的回答是错误的。如果你不改正它，我将不得不给它打负分。 - Elias Van Ootegem