如果您使用http2,Browserpaint中是否有任何更改?

时间:2018-04-11 10:14:55

标签: http paint http2

我们正在考虑将包含许多网站的服务器迁移到http2。现在有一个问题是,如果你使用http2并且并行下载所有资源,那么浏览器开始绘制/渲染页面可能需要更长时间,因为它等待所有资源被下载而不是仅仅开始已经存在,并在下载时继续重新绘制内容。

我认为这是错误的,但我没有找到任何文章或解释,所以我可以向那些认为可能是这种情况的人证明这一点。

2 个答案:

答案 0 :(得分:2)

当浏览器具有绘制所需的资源时,它将进行绘制,这在HTTP / 2下几乎不会发生变化。

我不确定为什么您认为浏览器会等待下载HTTP / 2下的所有资源但不会下载HTTP / 1.1?

某些资源(例如CSS和Javascript除非使用async属性设置)是渲染阻止,必须在初始绘制发生之前下载它们。从理论上讲,HTTP / 2对于多次下载来说速度更快,所以如果你转移到HTTP / 2就会发生这种情况,这些将会更快下载,因此它会更早下载。

现在,浏览器在HTTP / 1.1下使用的连接数量有限(通常为6-8)创建了一种自然排队机制,浏览器必须优先考虑这些关键资源而非像图像这样的非关键资源并首先发送它们。使用HTTP / 2有一个更高的限制(通常100-120并行下载,具体取决于服务器),因此浏览器不再优先考虑,并且担心如果并行下载所有资源,那么它们可能会相互减慢速度。例如,下载50个大型打印质量的图像将占用大量带宽,并且可能使同时下载更为关键的CSS资源需要更长的时间。事实上some early movers to HTTP/2 saw this scenario

这通过HTTP / 2中的优先级和依赖性来解决 - 其中服务器可以发送具有比其他资源类型(例如图像)更高优先级的一些资源类型(例如,CSS,JavaScript),而不是发送具有相同优先级的所有内容。因此,即使所有51个资源同时处于飞行状态,也应首先发送CSS数据,然后再显示图像。客户端也可以建议优先级,但它是最终决定的服务器。这取决于服务器实现是否具有良好的优先级策略,因此在切换之前进行测试是很好的。

值得注意的另一件事是如何在HTTP / 2下测量这种变化。如果低优先级映像在HTTP / 1下排队等待4秒,等待有限数量的HTTP / 1连接中的一个变为空闲,然后在2秒内下载,则您可能先前已将其测量为2秒下载时间(即技术上不正确,因为你没有包括排队时间所以它实际上是6秒)。因此,如果它显示为HTTP / 2下的5秒,因为它立即被发送,您可能认为它慢了3秒,实际上它快了整整一秒。分析任何移动对HTTP / 2的影响时,需要注意的事项。在测量影响时,最好先查看整体关键指标(第一次绘画,文档完整等等),而不是单个请求。

顺便提一下,这是一个非常有趣的主题,超出了StackOverflow答案中可以合理预期的范围。这是一个无耻的插件,但如果有兴趣了解更多内容,我会介绍很多in a book I am writing on the topic

答案 1 :(得分:0)

如果Web服务器遵循浏览器请求的优先级,理想情况下不会发生这种情况。在http2上,浏览器通常会请求具有最高优先级的css和异步js,优先级较低的图像。这应该确保即使你的图像,js和css同时被请求 - 服务器首先发回css。

唯一不应该发生的情况是浏览器配置不正确。

您可以在chrome devtools中查看任何页面的各种资源的优先级。