Cloudflare的HTTP/2优化策略

最新推荐文章于 2024-07-14 22:24:50 发布

LiveVideoStack_

最新推荐文章于 2024-07-14 22:24:50 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/90684091

版权

Cloudflare推出HTTP/2优先级优化升级，通过服务器控制优先级策略，提升网页加载速度。文章探讨了浏览器的HTTP/2优先级实现问题，以及Cloudflare如何通过自定义策略将控制权交给网站所有者，实现在多个场景下性能提升50%。通过Cloudflare Workers，网站所有者可以进一步定制加载优先级，优化用户Web访问体验。

摘要由CSDN通过智能技术生成

640?wx_fmt=jpeg

Cloudflare针对HTTP/2优先级的进一步优化，将网页控制权尽可能地交给网站所有者，可根据具体需求与场景，定制化网页加载优先级策略，提供更快速，更优质的用户Web访问与交互体验。

文 / Patrick Meenan

译 / John

原文

https://blog.cloudflare.com/better-http-2-prioritization-for-a-faster-web/

HTTP/2意味着更快的网页加载速度，而Cloudflare在很久之前也为所有客户提供了HTTP/2访问服务。但是其中HTTP/2的一项特性——加载优先级，并没有达到预期的效果。事实上优先级特性本身并没有什么问题，真正地问题在于浏览器中优先级特性的实现方式。

现在，Cloudflare推出了对于HTTP/2优先级的优化升级，也就是让我们的服务器有能力控制优先级策略从而真正提高网页的加载速度。在此之前，浏览器已经能够控制并决定加载网页内容的方式与时长。而现在我们希望能通过对优先级模型进行升级，将网页控制权尽可能地交给网站所有者。客户可以在Cloudflare仪表板的“Speed”选项卡中启用“增强HTTP/2优先级”——将升级的调度方案覆盖至浏览器默认设置从而显著提升网页访问体验（根据多个场景下的测试，我们发现性能普遍提升达50％）。借助Cloudflare Workers，网站所有者可以根据需求进一步定制用户的网页浏览体验。

背景

Web页面一般由数十个甚至数百个单独的资源组成，浏览器将这些资源加载并组装成最终显示的内容。这包括用户与之交互的可见内容（HTML、CSS、图像）以及网站本身的应用程序逻辑（JavaScript）、广告、跟踪网站使用情况的数据分析与营销跟踪信标等。根据何种优先级策略对这些资源的加载过程进行排序，直接决定用户等待网页加载所需要的时间以及查看网页内容并与其进行交互的体验。

浏览器本质上是一个HTML处理引擎，每当加载一个网页时，浏览器会遍历HTML文档并遵循指示，按照从HTML开始到结束的顺序构建页面；与此同时，浏览器也会引用层叠样式表（CSS）从而获悉并设置页面内容的样式；一些情况下，为了明确设置要显示的内容样式，浏览器会延迟显示网页内容直到层叠样式表被加载完成。文档中引用的脚本可能有以下几种不同的行为：如果脚本被标记为“异步”或“延迟”，则浏览器可以继续处理文档并在脚本可用时运行脚本代码；如果脚本没有被标记为“异步”或“延迟”，则浏览器必须停止处理文档，直到脚本下载完成并被执行才会继续处理文档，这些没有被标记的脚步被称为“阻塞”脚本——顾名思义，“阻塞”脚本阻止浏览器继续处理文档直到其被加载和执行。

HTML文档分为两部分：<head>文档的开头部分包含显示内容所需的浏览器样式表、脚本和其他说明；<body>文档位于头部文件之后，包含浏览器窗口中显示的实际页面内容（脚本和样式表也被包含在其中）。在浏览器访问至文档正文也就是<body>之前，网页不会向用户显示任何内容，页面将保持空白。因此，浏览器需要尽可能快地加载头部文件。

在处理文档的同时，通常浏览器也负责确定以什么样的顺序加载构建页面所需的不同资源。在HTTP/1.x的情况下，浏览器单次从任一服务器端所请求的内容量被限制（通常是6个连接，每个连接一次只能请求一个资源），所以资源的加载顺序是由浏览器通过请求的方式严格控制的。而对于HTTP/2，情况发生了很大的变化，浏览器可以一次请求所有的资源(至少了解有多少资源等待被加载），从而便于其向服务器提供有关资源传输的详细说明。

最优资源排序

大多数浏览器在加载页面的过程中存在最佳的加载资源优先级策略，其直接促成了良好的用户体验；同时最佳策略与非最佳策略所造成的网页加载耗时可能存在高达50％的差异。

如上所述，在浏览器呈现全部网页内容之前的页面加载时期，会在CSS上被阻止并阻止HTML的<head>部分中的JavaScript；所以在这一期间最好使用全部连接带宽以充分下载被阻塞的资源，并按照HTML定义的顺序一次下载一个资源以便于浏览器在下载下一个阻塞资源时可同时解析并执行上一个项目，实现下载和执行的流水线化操作。

640?wx_fmt=png

传统的并行下载或依次下载所需要的下载时间相同，而如果按照顺序下载并在第二个脚本下载时执行第一个脚本，那么这会明显缩短网页资源的加载时间。

一旦加载渲染项阻止内容，最佳加载状态可能取决于特定网站甚至业务优先级情况（如用户内容与广告分析对提供商而言的权重）。其中尤为重要的一项的是字体，浏览器仅在将样式表应用于即将显示的网页内容之后才会确认所加载字体。因而当浏览器确认所加载字体前，现存的即将被显示在网页上的文本就应当被准备完毕。获取字体过程所发生的任何延迟最终都会导致屏幕上显示空白文本或以错误字体显示文本。

为确保网页加载的正常，我们应当权衡以下内容：