javascript和css加载

Question

我想知道，如果有的话，让我们说6个javascripts包含在一个页面上，并且4-5 css包含在同一页面上，如果我创建一个文件或者它创建一个文件，它实际上是否最适合页面加载或许是两个并将它们全部加在一起而不是一堆它们？

Answer 1

是。使用较少的文件可以获得更好的性能。

这有几个原因，我相信其他人会因为我不会列出所有内容而加入。

1. 除了文件大小之外，请求中还有开销，例如请求自身，标头，cookie（如果已发送）等。即使在许多缓存方案中，浏览器也会发送请求以查看文件是否已被修改。当然正确的标头/服务器配置可以帮助解决这个问题。

2. 默认情况下，浏览器具有有限数量的同时连接，它将一次打开到给定域。我相信IE有2，firefox有4（我可能会误认为数字）。无论如何，重点是，如果你有10个图像，5个js文件和2个css文件，那17个需要下载的项目，只有少数会同时完成，其余的只是排队。

   < / LI>

   我知道这些是模糊和简单的解释，但我希望它能让你走上正轨。

Answer 2

您的目标之一是减少http请求，是的。名为yslow的工具可以对您的应用程序进行评级，以帮助您了解如何获得更好的用户体验。

http://developer.yahoo.com/yslow/

Answer 3

即使浏览多个请求，它也会尝试打开最少量的TCP连接（请参阅Keep-Alive HTTP标头选项文档）。通过在服务器端设置压缩（DEFLATE或GZIP）模式，也可以提高网页加载速度。

Answer 4

每个include都是用户浏览器必须单独的HTTP请求，并且HTTP请求来自开销（在服务器和连接上）。结合多个CSS和JavaScript文件将使您和您的用户更轻松。

这也可以通过一种名为CSS sprites的技术用图像完成。

Answer 5

是。您通过这种方式减少了HTTP请求。

Answer 6

最好的解决方案是将所有代码添加到一个页面，以便浏览器在一个GET请求中获取它。如果要链接到多个文件，浏览器必须在每次加载页面时请求这些外部页面。

如果在浏览器中启用了pieplineing并且该网站没有产生太多流量，则这可能不会导致问题。

Google已将其代码简化为一体化。我甚至无法想象有多少请求已经保存并减轻了服务器上的负载量。

Answer 7

没有任何理由感到想要分区js＆amp; css文件一方面是为了组织而另一方面是为了提高效率而拥有少量文件。有一些工具可以让你实现这两个目标。

例如，您可以将Blender合并到构建过程中以聚合（和压缩）CSS和JavaScript资产。 Java开发人员应该看看JAWR，这是最先进的。

Answer 8

我并不是非常精通影响服务器负载的因素，但我认为最好的办法是在一个大块和将脚本组织成有意义的单独文件之间找到平衡点。我不认为拥有五个左右的不同文件会对性能造成太大影响。

要考虑的更有影响力的因素是脚本的压缩，有各种在线实用程序摆脱空白空间并使用更有效的变量名称，我认为这些将导致比将文件放在一起更为显着的改进

Answer 9

正如其他人所说，是的，你可以包含的文件越少越好。

我强烈建议Blender缩小和整合多个CSS / JS文件。如果你像我一样，经常会得到10-15个样式表（重置，屏幕，打印，家庭，关于，产品，搜索等......），这个工具非常有帮助。