将所有js文件组合成一个文件必然更快?

时间:2016-07-25 06:25:17

标签: javascript performance

我总是在制作中听到,您希望将多个.js文件合并为1以使其加载更快。

但是由于浏览器实际上同时发出多个请求,因此有可能加载多个文件的速度比单个文件快,而且必须从头到尾下载。

这种推理是否正确?

3 个答案:

答案 0 :(得分:1)

这是一个复杂的领域。

同一服务器进行多个并发连接的浏览器(数量通常非常有限)并不能使客户端和服务器之间的连接更快。它们之间的管道非常大,服务器只有很大的交付能力。因此,如果有任何理由认为来自同一服务器的4个并行下载(每个10k)可能比从该服务器下载40k的速度更快。除此之外,浏览器限制了同一服务器的并发连接数,以及设置这些单独连接的费用(这是非常重要的),而且您还可以使用一个大文件自己的脚本。

现在。这是谷歌和其他人积极开发的领域。

如果您可以从多个服务器加载脚本(例如,可能从可以访问它们的几个CDN中加载公共库,以及您自己的服务器[或CDN]自己的单个组合脚本),那么它是有意义的分开那些。它没有使客户端的连接更快,但如果客户端的连接不是限制因素,那么您可以获得一个好处。当然,对于一个没有理由拥有自己的CDN的网站,从自由CDN加载公共库,只从您自己的服务器加载自己的脚本,可以让您在脚本上获得边缘强制等优势从免费的CDN加载。

答案 1 :(得分:0)

对于大型JS文件:

  

不太好主意,如果你有小的JS文件,那么其他的好主意   假设如果JS文件超过500kbs,则单个文件将进入   MBS并占用大量加载HTTP请求时间。

对于小型JS文件:

  

好主意,小的它有好主意但最好只使用第三方工具   这也将压缩你的最终单个文件,以便HTTP请求   时间会花费更少的时间。我建议使用PHP Minify(但你可以找到适合你的其他产品)   您为一组JS或CSS文件创建单个HTTP请求。   Minify还为客户端处理GZipping,Compression和HTTP Headers   侧缓存。

PHP minify的演示状态

<强>之前

enter image description here

<强>后

enter image description here

答案 2 :(得分:0)

这取决于您的服务器是HTTP / 2还是HTTP / 1.1。

HTTP / 2

HTTP / 2(H2)允许服务器快速响应多个请求,允许客户端简化所有请求,而无需等待第一个请求返回和解析。这有助于减少连接的需要,但不会完全删除它。请参阅this post以获得何时应该或不应该连接的深入答案。

要记住的另一件事是,如果你的服务器gzip你的资产,实际上更好地连接其中的一些,因为gzipping可以在具有大量重复文本的较大文件上执行得更好。通过将所有文件分开,实际上可能会损害您的整体性能。找到最佳解决方案需要一些试验和错误(其中很多仍然是新的,因此仍然会发现最佳实践)。

HTTP / 1.1

正如其他答案所指出的,对于大多数情况,使用HTTP / 1.1将所有文件合并为一个更好。这减少了HTTP请求的数量,HTTP / 1.1可能会很慢。有一些方法可以通过从不同子域请求资产来允许多个并发请求来缓解这种情况。

我建议您阅读High Performance Browser Networking以全面了解HTTP / 1.1的策略。