为什么我的浏览器无法一次加载所有图像资源？

Question

我正在尝试优化网页的加载时间。目前，主要的 http 请求可以在一秒内完成，但是，随后的图像加载似乎“级联”：

http://picpaste.novarata.net/pics/320bd387b4988729ad2dbb10f69a7857.png

我使用 nginx 来提供静态文件，有 3 个工作进程。是否有可能由于积压而导致连接被占用？

我假设所有这些图像都会同时加载。文件通过 HTTPS 提供，keepalive 设置为 65 秒。

编辑：Firefox 确实似乎尝试立即加载它们，但是，连接时间逐渐增加到 2 秒以上：

http://picpaste.novarata.net/pics/32c28414501d165df3e04b01e3ac3084.png

Answer 1

此行为取决于您的浏览器。例如，如果您使用 Chrome，您可能会发现时间图显示相同的行为，但事情会“停滞”一段时间；这可能是由于 [Chrome] 对每个来源的并发连接数限制为 6 个。

您没有说您使用的是什么浏览器和版本。

以下是摘录https://developer.chrome.com/devtools/docs/network#resource-network-timing

停滞/阻塞 请求在发送之前等待的时间。此时间包括代理协商所花费的任何时间。此外，此时间还包括浏览器等待已建立的连接可供重新使用的时间，遵守 Chrome 的每个源规则最多六个 TCP 连接。

Answer 2

通常使用内容服务器来提供静态内容。这可以设置适当的缓存标头，以便浏览器可以缓存内容。这减少了后续页面加载的渲染时间。一些网站会设置非常长的到期时间，并使用新文件名来更新内容。
虽然这对初始加载时间没有帮助，但它应该会增加后续加载时间。它还可以减少服务器上的负载，这也将有助于实现这一目标。

虽然您能做的事情相对较少，无法可靠地增加加载时间，但可以缩短渲染时间。（浏览器限制打开的连接数是有充分理由的。）包括图形元素的大小数据允许页面在图形下载之前进行渲染。加载异步渲染不需要的脚本组件也会有所帮助。

Answer 3

这可能取决于 KeepAlive 设置。如果设置 - 服务器将尝试使用尽可能少的连接（与浏览器协调）。然而，这样做时，通信将变为“同步”，因此存在“我请求 A，直到 A 到达后才会请求 B”。此外，服务器应该按照收到请求的顺序发送项目，而不是按照它能够处理这些请求的顺序发送项目。这是 HTTP/1.1 的限制

您所询问的是 HTTP/2 行为，其中操作是异步的，并且存在真正的多路复用。