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

Question

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

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

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

或

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

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

Answer 1

Minimize HTTP Requests

Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

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

Answer 2

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

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

您可以使用 Chrome 中的开发人员工具分析您网站的加载行为。

Answer 3

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

这些技术不仅提高了性能，因为 更少的数据 （仍然足够浏览器） 被传输。但主要是因为：

即只需要下载几个文件。检查这个我的包示例：

<!-- 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>

相比之下，没有捆绑包含数百小参考、小脚本

这是最大的好处，只有很少的文件 - 浏览器不必执行那么多请求，这些请求对并行执行有限制

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

One File or Multiple Files in HTML

html

javascript

css

httprequest

pagespeed