Performance js/css与it的分离'；s对缓存的影响

假设我有以下设置：

Page1.html

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

Page2.html

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

有人告诉我，合并两个js和其他css文件会更好地进行缓存？但是这些单独的文件不是也会被缓存吗？我看不出这有什么不同（除了可维护性——我个人喜欢分离）

组织这样的事情最有效、最明智的方式是什么

免责声明：：微优化不是这里的问题-在我开始我的项目之前，我想知道什么是最佳实践，这样我以后就不必再讨论这个问题了。

好处是：

如果用户访问第1页，然后访问第2页，则其浏览器将获取：

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协商，这可能相当缓慢

---

至少，对于page2.css和page2.js，您可能不必两次“侦听”大约1KB的传入HTTP头。（尽管所有的主要浏览器都可能将这些请求链接在一起。）

这里有几个要考虑的事项：

• page1和page2文件的大小。如果它们非常小，那么可能不值得单独的http请求将它们放入单个文件中的额外开销

• 组合文件的总大小：某些移动设备不喜欢缓存大文件

• 用户在访问您的站点时同时访问第1页和第2页的可能性

---

附带说明：如果您担心服务器端组织，您可以在开发时将文件分开，并将文件合并为一个文件，作为构建的一部分。

何时需要分开？假设page1.js是2kb，page2.js是60kb？这是不是少了一点干巴的，多了一点对你有用的？？。。。“排除常见内容”可能是一般规则。既然你有一个master.css，我会假设（希望？）page1.css和page2.css实际上很短…？在这种情况下，我建议直接将它们嵌入HTML（如果它们非常短）或将它们放入master.css（如果它们彼此不冲突）；同样，对于JavaScript…要做的另一件事是确保缓存头设置正确，以便浏览器避免在第2I页的组件上使用“if modified-since”获取（作为一般经验法则）在开始生产之前，一定要对css和js进行“编译/合并”——我想我主要关心的不是两页的示例，而是30页的示例（非常大的应用程序）-单个文件的大小可能很小，但是集体文件可能会很重。但就像我提到的那样，这是一个特定的情况-通常会组合选择文件并继续？小补充：根据我的经验，js和css资源之间通常存在差异-尤其是在开发相当丰富的客户端时：我的Javascript代码往往是非常特定于页面，而我的css更易于重用（请查看）。css只是为了补充问题-我没有遇到任何需要它的项目（特定于小型css可以保留在全局文件中）。JS部分是我主要关心的。我正在实现一个MVC/P，我的视图被javascript严重操纵，每个视图都有显著不同的特性和功能。我现在正处于设计阶段，我正试图考虑尽可能多的可重用功能。简言之，我想我会将文件分开如果组合文件的大小很大（我第一次访问你的网站时必须加载~1MB的js不会给你留下正面印象），并且可以将其分为更小的（可缓存的）文件，并“按需”加载到你的子页面上。你可以想到的另一个策略是“欺骗”“通过在其他轻量级页面上预加载资源，例如用户在启动应用程序之前可能访问的登录页面。这将填充缓存，从而使应用程序加载更快。