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

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

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

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

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

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

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

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

答案1

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

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

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

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

答案2

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

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

答案3

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

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

相关内容