使用 Javascript 延迟加载图像是否保留了 HTTP2 的优势?
Does using Javascript to lazy-load images retain the benefits of HTTP2?
我使用 HTTP2 加载我网站上的所有图像,并且在几个地方我还使用带有 jQuery 插件的延迟加载,即仅在图像进入视口时加载图像。
我的问题是,使用 Javascript 以这种方式加载图像是否抵消了 HTTP2 的优势?它们不是一次并行地加载许多图像,而是一张一张地加载,或者一次加载几张,这感觉就像回到了 HTTP1 的一步。浏览器在通过JS加载资源时是否仍然使用多路复用?
无论您是通过 HTML 标签(如 <img>
)还是通过 Javascript(XHR 或获取 API 加载资源或图像,对浏览器来说都无关紧要).它仍然会根据服务器的能力而不是根据您用来请求资源的方式来选择协议(HTTP/1.1 或 HTTP/2)。
这也意味着通过 Javascript 加载任何内容,您将使用 HTTP/2 并在服务器支持的情况下进行多路复用。当然,您还可以利用 HTTP/2 功能,例如只需创建一个 TCP 连接和 header 压缩。但是,如果您的图书馆一次只发出一个请求,它可能无法充分利用 HTTP/2 的全部潜力,因为那时只会使用一个 HTTP/2 流。在这种情况下,检查库是否可以配置为一次加载多个并行资源可能有意义。
我使用 HTTP2 加载我网站上的所有图像,并且在几个地方我还使用带有 jQuery 插件的延迟加载,即仅在图像进入视口时加载图像。
我的问题是,使用 Javascript 以这种方式加载图像是否抵消了 HTTP2 的优势?它们不是一次并行地加载许多图像,而是一张一张地加载,或者一次加载几张,这感觉就像回到了 HTTP1 的一步。浏览器在通过JS加载资源时是否仍然使用多路复用?
无论您是通过 HTML 标签(如 <img>
)还是通过 Javascript(XHR 或获取 API 加载资源或图像,对浏览器来说都无关紧要).它仍然会根据服务器的能力而不是根据您用来请求资源的方式来选择协议(HTTP/1.1 或 HTTP/2)。
这也意味着通过 Javascript 加载任何内容,您将使用 HTTP/2 并在服务器支持的情况下进行多路复用。当然,您还可以利用 HTTP/2 功能,例如只需创建一个 TCP 连接和 header 压缩。但是,如果您的图书馆一次只发出一个请求,它可能无法充分利用 HTTP/2 的全部潜力,因为那时只会使用一个 HTTP/2 流。在这种情况下,检查库是否可以配置为一次加载多个并行资源可能有意义。