JS / CSS的分离及其对缓存的影响

Question

说我有以下设置：

Page1.html

• 包括master.css，page1.css和page1.js

page2.html

• 包括master.css，page2.css和page2.js

有人告诉我，合并两个JS和其他CSS文件对于缓存会更好吗？但是，单独的文件也不会被缓存吗？我看不出这是如何有所作为的（除了可维护性外，我个人喜欢分离）。

组织类似的东西的最性能和最明智的方法是什么？

免责声明:: 微观优化不是这里的问题 - 我想知道在开始项目之前的最佳实践是什么，因此我不必稍后再对此进行重新审视。

Answer 1

好处是：

如果用户访问Page1，则Page2，他们的浏览器将获取：

Page1.html
-> master.css
-> page1.css
-> page1.js

然后，一段时间以后：

Page2.html
-> [ no need to re-fetch cached items ]

如果page1.css <-> page2.css和page1.js <-> page2.js基本上相似，则可以（最坏的情况）节省两个DNS查找和两个HTTP谈判，这可能会很慢。

至少，您可能会保存不得不“收听”大约1KIB传入的HTTP标头，page2.css和page2.js。 （尽管所有主要的浏览器都可能将这些请求串在一起。）

Answer 2

这里有几件事要考虑：

• Page1和Page2文件的大小。如果它们很小，则可能不值得单独的HTTP请求的额外开销来将它们放入单个文件中。

• 组合文件的总尺寸：某些移动设备并不热衷于缓存大文件。

• 您的用户在访问您的网站时都会访问Page1和Page2的可能性。

旁注：如果您担心服务器端组织，则可以在开发文件时将文件分开，并将这些文件组合成一个文件，作为构建的一部分。