当脚本源多次加载时会发生什么？

Question

假设我多次加载一个库：

<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>

我在devtool中检查了Network选项卡，发现它只加载了一次。这是有道理的，但我想知道引擎到底是如何处理这个问题的？

• 它检测到重复并且只执行第一行？
• 它执行所有的行，但检测到相同的文件URL已被访问，所以它不再下载？
• 它执行所有的行，但检测到相同的文件名已经下载，所以不会再次下载吗？
• 它执行所有的行，但检测到相同的文件内容已经下载，所以不会再次下载？

我读过这篇文章，防止JavaScript文件多次加载- Michael on Technology，默认情况下，它似乎会加载多次。我说的对吗？

Answer 1

所有主流浏览器，如Firefox、Safari、IE和Opera，将在第一次使用Javascript文件时缓存它，然后在后续的脚本标记上，如果缓存的副本可用，如果它尚未过期，浏览器将使用缓存副本。话虽如此，缓存行为通常可以通过浏览器配置进行更改，因此不能依赖任何类型的缓存行为。

<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>
<script src="https://unpkg.com/neovis.js@2.0.0-alpha.9"></script>

关于文件的执行，即使文件确实被缓存，您也可能会遇到问题，因为相同的代码将被执行五次。至少，这将导致浏览器花费更多的时间，这可能会产生错误，因为大多数JavaScript代码都不是多次编写的。例如，它可能多次附加相同的事件处理程序。

Answer 2

对于显示的代码，脚本https://unpkg.com/neovis.js@2.0.0-alpha.9将执行5次。

它是否将被多次下载取决于作为https://unpkg.com/neovis.js@2.0.0-alpha.9请求的响应发送的内容和浏览器设置。

服务器可以发送ETag或修改日期头，并结合缓存策略信息头来告诉浏览器，如果下次请求URL，应该做什么。

标头可以说某个资源在一段时间内是有效的，因此浏览器不需要在这段时间内执行任何进一步的请求。然而，它也可以说，浏览器必须验证每次使用上次收到的ETag或修改日期的新鲜度。