HTML中的一个文件或多个文件

Question

我一直听说，当网站上线时，您应该尽可能少地将所有JS和CSS放在文件中。原因是因为http请求较少，因此有助于缩短加载时间。

所以我的问题是：这是否准确？

换句话说，更多HTTP请求但更小的单个文件？

OR

一个大文件较少的http请求？

这假设总文件大小相同。哪个更好？

Answer 1

在我看来，我们应该尽可能简单地开发网页 - 包含尽可能多的小文件。但是当我们开始生产时，我们应该使用1）最小化和2）捆绑。

这些技术不仅可以提高性能，还可以传输更少的数据 （对于浏览器来说还是足够的）。但主要是因为：

Max parallel http connections in a browser?

即。只需要很少的文件即可下载。检查我的捆绑示例：

<!-- all stuff loaded as a bundle of three resources -->
<script src="/project/angular?v=NveddIF51HI4iaxPpUsI0S6c3he4gNp66Up41Sv2fKK5"></script>
<script src="/project/project?v=d9PZoP5TedID06vwo3Yf-m6fBwo1TZw06O9ggW7pSwa9"></script>
<script src="/project/states?v=nquC98Yj1sR51ao9uywcJ3nzq7v07c7k1jzEi4UzMvsq"></script>

相比之下，没有捆绑包含数百个的小型引用，小脚本

这是最大的好处，拥有少量文件 - 浏览器不必执行如此多的请求，这些请求对并行执行有限制

Answer 2

  

最小化HTTP请求

     

减少组件数量会减少HTTP的数量   呈现页面所需的请求。这是加快页面的关键。

     

组合文件是减少HTTP请求数量的一种方法   将所有脚本组合到一个脚本中，并进行类似的组合   将所有CSS转换为单个样式表。组合文件更具挑战性   当脚本和样式表在不同页面之间有所不同，但是制作时   这部分发布过程可以缩短响应时间。

---来源：https://developer.yahoo.com/performance/rules.html

Answer 3

每个请求都需要时间。浏览器只能处理有限数量的并发连接，因此通常有必要限制显示内容所需的请求数量，以加快加载速度。

但是，区分文档“HEAD”和“BODY”中引用的资产非常重要。除非解析了HEAD中引用的所有脚本和工作表，否则浏览器不会呈现页面。根据您网站的结构，您可以通过将脚本移动到BODY来减少可视加载时间。

您可以使用Chrome中的开发者工具来描述您网站的加载行为。