javascript - Javascript 大小在缓存后是否会成为性能问题？

Question

我正在编写一个项目，它将使用一些相当大的 JS 库，包括 jquery UI。不过，该项目将在 Intranet 中运行。所以下载时间对我来说不是真正的问题，大多数人应该只需要下载一次库，因为我认为它们将保留在浏览器的缓存中。

我的问题是关于现代浏览器(IE9、FF5 等)如何处理 Javascript 代码的。我想它在某个时候被编译了，但是这是在每次页面加载时完成的，还是编译后的代码也被缓存了。如果是这样，即使在浏览器关闭后它也会被缓存吗？

此 Web 应用程序可能会在某些低功率可移植设备上运行，因此我希望它的效率相当高。我想将所有 javascript 文件组合成一个大文件，该文件链接到应用程序的每个页面。

但是取决于浏览器必须做多少工作来处理所有 JS 我想知道我是否应该将它们分开以便不是所有页面都必须加载所有 JS。显然，这还需要更多工作。

如有任何想法或信息，我们将不胜感激。谢谢。

Answer 1

是的，如果出于以下原因进行缓存，JavaScript 大小仍然是一个性能问题:

• 大多数浏览器不会缓存它们执行的字节码。所以脚本仍然必须在每次页面加载时重新解析。现代浏览器执行此操作的速度更快，但对于非常大的 JavaScript 文件来说，这仍然可能是一个问题。
• 您的 JavaScript 文件中的代码实际上会在每次页面加载时执行。即使浏览器开始缓存字节代码，它们仍然必须在每次加载页面时重新执行 JavaScript。
• 由于您无法控制的原因，您获得的缓存率可能低于预期。用户可能会禁用他们的缓存，或访问太多站点，以至于您的文件很快就会从缓存中过期。您应该检查日志以确保页面加载与 JavaScript 文件加载的比率很高。
• 从缓存中加载文件通常很快，但并不总是那么简单。在某些情况下，这可能需要超过 200 毫秒。

你可以做一个非常快速的测试来大致了解你的脚本需要多长时间来解析和执行，如下所示:

<script>
  var startTime = (new Date()).getTime();
</script>
<script src="cachedFile1.js"></script>
<script src="cachedFile2.js"></script>
<!--all your scripts included this way-->
<script>
  var endTime = (new Date()).getTime();
  alert("Took " + (endTime - startTime) + " milliseconds to parse and execute");
</script>

确保在您支持的所有目标浏览器上进行测试；不同浏览器之间的 JavaScript 解析和执行时间可能会有很大差异。还要确保您在与您的用户所拥有的计算机一样慢的计算机上进行测试。如果您确实发现了性能问题，您可能需要在分析器中解决它们。缩小对于改进解析和执行时间没有多大帮助。