缓慢加载 - 如何正确加载页面以防止图像被阻塞（排队）

Question

页面加载速度低于预期。我用firebug检查了时间线，我看到很多图像阻塞：

http://i.imgur.com/tenTNVH.png

我想我做错了什么。 （我知道我在这里有双jquery，会消除这个错误），但是全局有没有办法加载与js并行的图像？

Answer 1

发生这种情况的原因不是因为图像被js阻止，而是因为浏览器与同一服务器的并行连接数量有限（一些注意事项约为6-7） 如果仔细查看时间表，您会看到有这个限制 - 同时下载的文件不超过7个，下一个文件下载完成后会启动。  在过去，有一些令人讨厌的技巧可以避免这种限制，例如将图像放在子域上并将它们并行加载，就像从另一台服务器那样，但是有一种更好的方法可以提高加载性能。在努力/结果方面最有效的是：

• 使用js连接/最小化工具链。将所有JS放在一两个文件中使您的连接池可用于其他下载。在您的情况下 - 您有 3 版本的jQuery和 2 的jqueryUI。你真的需要所有这些吗？有两个文件而不是5个文件会显着减少阻塞，特别是考虑到文件是无法识别和大的事实。
• 将CDN用于第三方库。谷歌cdn等公共免费版。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>。这也有很大好处，它已经在浏览器的缓存中
• 将您的图片连接成精灵。如果您有许多小图像，这不是内容但与UI相关，那就太好了。有很多技术可以实现它
• 在服务器上启用SPDY（如果可用）。这可以提高下载速度，不是通过删除阻塞，而是通过消除连接开销。

Answer 2

当对同一主机有多于X个并行请求时，通常会发生阻塞（在chrome 16中，每个浏览器会有所不同）。

要解决此问题，您有以下几种选择：

1. 对于图片 - 将媒体内容分割到不同的主机（您可以从中提供相同内容的子域）
2. 对于js和css-尝试预先缩小和连接服务器上的文件，以便它们需要较少的检索请求。
3. 对于图标等，尽可能尝试将它们组合成精灵。

这里有一篇很好的文章：http://gtmetrix.com/parallelize-downloads-across-hostnames.html