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

Question

页面加载速度比预期慢。我查了时间表与萤火虫，我看到了很多像堵：

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

我想我做错了什么。 （我知道我在这里有双jQuery，可以消除这个错误），但是在全球范围内，有什么方法可以加载与js平行的图像？

Answer 1

发生这种情况的原因不是因为图像被js阻止，而是因为浏览器并行连接数量受限于同一服务器（某些注释大约是6-7） 如果您仔细查看时间表，看到有这样的限制 - 同时下载的文件不超过7个，下一个文件在当前文件下载完成时启动。 过去有一些讨厌的技巧来避免这种限制，比如将图像放在子域上，并像其他服务器那样并行加载它们，但是有更好的方法来提高加载性能。在努力/结果方面最有效的是：

• 使用js级联/最小化工具链。让所有的JS在一两个文件中留下您的连接池用于其他下载。在你的情况 - 你有jQuery UI的版本的jQuery和。你真的需要所有这些吗？拥有两个文件而不是5个文件会显着减少阻塞，特别是考虑到文件无法识别和庞大的事实。
• 将CDN用于第三方库。有公共免费的，如谷歌CDN。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>。这也有很大的可能，它已经在浏览器的缓存中的优势
• 将您的图像拼接成精灵。如果你有很多小图片，这不是很满意，但与用户界面相关。有很多技巧可以实现它
• 如果服务器可用，请在服务器上启用SPDY。这可以提高下载速度，而不是通过删除阻止，但通过删除连接开销。

Answer 2

阻塞通常发生在对同一主机有超过X个并行请求时（其16位，每个浏览器不同）。

为了改善这种情况，你有几种选择：

1. 对于图像 - 分手了你的媒体内容到不同的主机（子域，从中可以提供相同的内容）
2. 对于js和CSS-尽量缩小和连接服务器上的文件，以便它们需要更少的请求来检索。
3. 对于图标等，如果可能的话，尝试将它们组合成精灵。

即使世界一个很好的文章关于它在这里：http://gtmetrix.com/parallelize-downloads-across-hostnames.html