HTTP/2承诺了一个更快的web，而Cloudflare早就为我们的所有客户推出了HTTP/2访问。但是HTTP/2的一个特性，优先级划分，并没有达到宣传的效果。不是因为它从根本上被破坏了，而是因为浏览器实现它的方式。如今，Cloudflare正在推动对HTTP/2优先级的更改，这使我们的服务器能够控制优先级决策，从而真正提高web的速度。从历史上看，浏览器一直控制着如何以及何时加载web内容。今天，我们将为所有付费计划引入一个彻底的改变，将控制权直接交给网站所有者。客户可以在Cloudflare dashboard的"速度"选项卡中启用"增强的HTTP/2优先级"：这将通过改进的调度方案覆盖浏览器默认值，从而显著提高访客体验（我们已经看到在多个情况下，速度快了50%）。有了Cloudflare Workers，站点所有者可以更进一步，根据自己的具体需求完全定制体验。背景网页由几十个（有时数百个）独立的资源组成，这些资源由浏览器加载并组合成最终显示的内容。这包括用户与之交互的可见内容（HTML、CSS、图像）以及站点本身的应用程序逻辑（JavaScript）、广告、跟踪网站使用情况的分析和营销跟踪信标。这些资源如何加载的顺序对用户查看内容和与页面交互的时间有重大影响。浏览器基本上是一个HTML处理引擎，它遍历HTML文档，并按照从HTML开始到结尾的顺序执行操作，同时构建页面。对样式表（CSS）的引用告诉浏览器如何设置页面内容的样式，浏览器将延迟显示内容，直到加载了样式表（因此它知道如何设置要显示的内容的样式）。文档中引用的脚本可以有几种不同的行为。如果脚本被标记为"async"或"defer"，浏览器可以继续处理文档，并且只要脚本可用就运行脚本代码。如果脚本没有被标记为async或defer，则浏览器必须停止处理文档，直到脚本下载并执行后才能继续。这些被称为"阻塞"脚本，因为它们阻止浏览器在加载和执行文档之前继续处理文档。HTML文档分为两部分。文档的位于开头，包含显示内容所需的样式表、脚本和其他浏览器指令。文档的位于head之后，包含在浏览器窗口中显示的实际页面内容（尽管脚本和样式表也允许位于body中）。在浏览器到达文档正文之前，没有任何内容可向用户显示，页面也将保持空白，因此，尽快浏览文档头部非常重要。""HTML5Rocks"有一个很好的关于浏览器如何工作的教程，如果你想深入了解细节的话。浏览器通常负责确定加载构建页面和继续处理文档所需的不同资源的顺序。在HTTP/1.x的情况下，浏览器一次可以从任何一个服务器请求的东西数量是有限的（通常是6个连接，每个连接一次只能请求一个资源），因此排序由浏览器严格控制，由请求的方式决定。使用HTTP/2，事情发生了很大的变化。浏览器可以一次请求所有的资源（至少在它知道这些资源之后），并向服务器提供有关如何传递资源的详细说明。最优资源排序对于页面加载周期的大部分时间，都有一个资源的最佳排序，这将导致最快的用户体验（最优和非最优之间的差异可能是显著的-高达50%或更多）。如上所述，在页面加载周期的早期，浏览器才能呈现任何在CSS上被阻止的内容，并在HTML的部分阻塞JavaScript。在加载周期的这一部分，最好使用100%的连接带宽来下载阻塞资源，并按照它们在HTML中定义的顺序一次下载一个。它允许浏览器在下载下一个阻塞资源时解析和执行每个项，从而允许下载和执行以管道方式进行。当并行或一个接一个地下载脚本时，下载所需的时间相同，但通过顺序下载，可以在下载第二个脚本时处理和执行第一个脚本。一旦渲染块内容加载完毕，内容会变得更加有趣，最佳加载可能取决于特定的站点甚至业务优先级（用户内容vs广告vs分析，等等）。字体尤其困难，因为浏览器只有在样式表应用于要显示的内容之后才发现它需要什么字体，所以当浏览器知道字体时，它需要显示已经准备好绘制到屏幕上的文本。加载字体的任何延迟都会导致屏幕上出现空白文本的句点（或使用错误字体显示的文本）。通常需要考虑一些权衡：应尽快加载页面（视区）可见部分中的自定义字体和可见图像。它们直接影响用户页面加载的视觉体验。非阻塞JavaScript应该相对于其他JavaScript资源进行串行下载，这样每个JavaScript资源的执行都可以通过管道进行下载。JavaScript可能包括面向用户的应用程序逻辑以及分析跟踪和营销信标，延迟它们可能会导致业务跟踪的指标下降。图像可以从并行下载中获益。图像文件的前几个字节包含了浏览器布局可能需要的图像尺寸，并行下载渐进式图像可以在视觉上完成，大约传输了50%的字节。权衡权衡，在大多数情况下，一种行之有效的策略是：自定义字体按顺序下载，并将可用带宽与可见图像分开。可视图像并行下载，将其中的"图像"共享带宽分开。当没有其他字体或可见图像挂起时：无阻塞脚本按顺序下载，并将可用带宽与不可见的图像分开非可视图像并行下载，将"图像"共享的带宽分成两部分。通过这种方式，用户可以看到的内容被尽可能快地加载，应用程序逻辑被尽可能地延迟，而不可见的图像以这样一种方式加载，即布局可以尽快完成。例子为了便于说明，我们将使用一个典型的电子商务网站的简化产品类别页面。在本例中，页面包含：页面本身的HTML文件，由蓝色框表示。外部样式表（1）由CSS表示。4个外部脚本（JavaScript），由橙色框表示。其中2个脚本在页面开头阻塞，2个是异步的。阻塞脚本框使用较深的橙色阴影。1个自定义web字体，用红色框表示。13张图片，以紫色方框表示。页面徽标和4个产品图像在视口中可见，8个产品图像需要滚动才能看到。这5张可见光图像使用较暗的紫色阴影。为了简单起见，我们假设所有资源的大小都相同，并且每个资源在访问者的连接上下载需要1秒。加载所有内容总共需要20秒，但如何加载会对体验产生巨大影响。当资源加载时，浏览器中描述的最佳加载如下所示：当HTML、CSS和blocking脚本加载时，页面在前4秒是空白的，全部使用100%的连接。在4秒的标记处，页面的背景和结构显示为没有文本或图像。一秒钟后，即5秒，显示页面的文本。从5-10秒的图像加载，开始时模糊，但很快锐化。在7秒左右，它几乎与最终版本无法区分。在10秒标记处，视口中的所有可视内容都已完成加载。在接下来的2秒钟内，加载并执行异步JavaScript，运行任何非关键逻辑（分析、营销标记等）。在最后的8秒钟内，其余的产品图片将被加载，以便在用户滚动时做好准备。当前浏览器优先级目前所有的浏览器引擎都实现了不同的优先级策略，但没有一个是最优的。Microsoft Edge和Internet Explorer不支持优先级排序，因此所有内容都会返回到HTTP/2默认值，即并行加载所有内容，在所有内容之间平均分配带宽。微软Edge正在努力在未来的Windows版本中使用Chromium浏览器引擎，这将有助于改善这种状况。在我们的示例页面中，这意味着浏览器在加载的大部分时间都停留在头部，因为图像减慢了阻塞脚本和样式表的传输。在视觉上，这会导致相当痛苦的体验：在大多数内容显示之前，盯着一个空白屏幕19秒，然后文本显示延迟1秒。当病人在观看19秒的进展时，会感觉到它是动画的（即使是在屏幕上，它也可能是空白的）：Safari并行加载所有资源，根据Safari认为它们的重要性（w