缓存后Javascript大小是否是性能问题？

Question

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

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

这个网络应用程序可以运行在一些低功耗的便携式设备上,所以我想要合理有效.我想将所有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解析和执行时间在不同浏览器之间会有很大差异.还要确保在计算机上进行测试,该计算机的速度与用户的速度一样慢.如果确实发现性能问题,则可能需要在分析器中解决它们.缩小对于改进解析和执行时间没有多大帮助.