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

Question

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

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

我想我做错了什么。 (我知道我这里有双 jquery，会消除这个错误)，但是全局有什么方法可以与 js 并行加载图像吗？

Answer 1

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

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