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

Question

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

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

我想我做错了什么。(我知道我这里有双jquery，可以消除这个错误)，但是在全球范围内，有任何方法可以加载与js并行的映像吗？

Answer 1

之所以会出现这种情况，并不是因为图片被js阻塞，而是因为浏览器与同一台服务器的并行连接数量有限(一些人注意到大约6-7)，如果您仔细查看时间线，您将看到这个限制--同时下载的文件不超过7个，下一个文件在当前文件下载完成时启动。在过去，有一些棘手的技巧可以避免这种限制，比如将映像放在子域上，并像从另一台服务器并行加载它们一样，但是有更好的方法来提高加载性能。在努力/结果方面最有效的是：

• 使用js连接/最小化工具链。将所有的JS保存在一个-两个文件中，您的连接池就可以用于其他下载。在您的例子中-您有3版本的jQuery和2 of 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