2015-08-16 74 views
6

这将导致更高的速度/效率:引用目录中所有文件的一个JavaScript文件或引用目录中每个文件的不同JavaScript文件?引用单独的JS文件与一个JS文件

所以基本上,在所有网页中引用相同的JavaScript文件与每个网页的唯一JavaScript文件。

注意:我认为引用单个文件会比较慢,因为那里有一些代码已经被某些文件淘汰,从而运行无用代码并导致文件运行效率降低。

+0

关于从其他文件读取无用的代码,不应该由于其他文件涉及过时的代码而导致一个JS文件变慢? –

回答

8

涉及权衡,所以您可能最终需要衡量您的具体情况,以确保。但是,我会解释一些权衡。

  1. 如果你有数据或巨代码量的巨大金额,只在一个或几个页面中使用,那么你可能会想单独说出来到自己的文件,所以您只能加载它,初始化它,并在实际需要时使其占用内存。但是,请注意现代计算机(甚至是手机)的内存量,数据或代码必须相当大才能保证单独下载。

  2. 除了第1项,您几乎总是想要优化为最大缓存效率。从缓存中检索文件(即使是比需要更大的文件)比通过网络检索任何文件(甚至是小文件)要快得多,因为这些文件是您真正想要针对缓存进行优化的文件。而且,检索这些文件的时间通常会超过JS分析时间(现在的CPU速度非常快),因此触发额外的下载以节省一些JS分析时间的速度可能不会更快。

  3. 优化缓存的最佳方式是到让大多数页面引用相同的通用脚本文件。然后,当观众第一次访问您的网站时,它们会被加载一次,并且所有后续加载都会从浏览器缓存中正确显示。这是理想的。这种缓存效率很容易克服在主文件中有一些未被使用或未被触发的代码在某些页面中没有被使用。

  4. 许多小的下载量(甚至来自缓存)比一个更大的下载效率低。对于浏览器或服务器来说,更多不同的请求通常不会那么高效。所以,将JS文件组合成更大的连接文件通常是件好事。

  5. 所有这些都是有限制的。如果你已经将100个独立页面的代码完全分开,并将所有代码连接在一起,并且每段代码都会搜索DOM中的多个页面元素(并且99%的时间未找到它们),那么这可能不是一种有效的方法。但是,通常情况下,您可以根据高级类名将事物划分为多个类别,从而使共享代码更智能。因此,例如,基于<body>标签上的类名称的存在,您将只运行部分初始化代码,跳过其余部分,因为它的分类不存在。因此,在组合代码时,其中大部分代码在任何给定页面上都不相关,因此明智地决定如何确定共享文件中实际运行的初始化代码。

3

您需要测量您的特定情况 - 因为每个站点/页面在加载较少文件/加载额外不必要的脚本(同样适用于CSS)之间有自己的平衡。

通常单个文件在HTTP v1中速度更快,因为并行下载的总数有限制,HTTP v2应该消除差异。

相关问题