渐进式图像呈现和HTTP/2复用技术已经存在了一段时间，但是现在我们将它们以一种新的方式结合在一起，使它们更加强大。使用Cloudflare，渐进式流媒体图像的加载时间似乎只有一半，浏览器可以更快地开始呈现页面。document.getElementsByTagName（'video'）[0].playbackRate=0.4在HTTP/1.1连接中，服务器对资源发送到客户端的顺序没有任何选择；它们必须整体上按照web浏览器请求的顺序发送响应。HTTP/2通过增加多路复用和优先级来改进这一点，它允许服务器准确地决定发送什么数据以及何时发送。我们利用了这些新的HTTP/2功能，通过发送最重要的图像数据片段来提高渐进式图像加载的感知速度快点。什么是渐进式图像渲染吗？基本图像严格从上到下加载。如果浏览器只接收到图像文件的一半，则只能显示图像的上半部分。渐进式图像的内容不是从上到下排列，而是从低细节到高细节。接收一小部分图像数据可以让浏览器显示整个图像，只是保真度较低。随着更多的数据到达，图像变得更清晰更锋利。这个在JPEG格式下工作得很好，在JPEG格式中，显示图像预览只需要大约10-15%的数据，而在50%的数据下，图像看起来几乎和整个文件交付时一样好。渐进式JPEG图像包含与基线图像完全相同的数据，只是以更有用的顺序重新排列，因此渐进式渲染不会增加文件大小的任何成本。这是可能的，因为JPEG不以像素的形式存储图像。相反，它将图像表示为频率系数，频率系数类似于一组预定义的模式，可以任意顺序混合在一起以重建原始图像。JPEG的内部工作原理非常迷人，您可以从我最近的文章中了解到更多表演。现在（）会议说话吧。那个结果几乎可以在一半的时间内免费观看！这个页面看起来很完整，可以更快地使用。剩下的图像数据很快就会到达，在访问者有时间注意到之前，将图像升级到其全部质量缺少.HTTP/2逐步精简，但有一个陷阱。网站有不止一个图像（有时甚至有数百个图像）。当服务器幼稚地一个接一个地发送图像文件时，渐进式渲染没有多大帮助，因为总的来说图像仍然加载seq最后的：完成的一半图像的数据（另一半没有数据）看起来不如拥有一半的数据图像。和还有另一个问题：当浏览器还不知道图像大小时，它会用占位符来布局页面，并在每一个占位符出现时转发页面图像加载。这会使页面在加载过程中跳转，这是不优雅的，分散注意力和烦人的用户。我们的新的渐进式流媒体特性极大地改善了这种情况：我们可以同时并行地发送所有图像。通过这种方式，浏览器可以尽快获得所有图像的大小信息，无需等待大量数据即可绘制所有图像的预览，并且大图像不会延迟样式、脚本等更重要的加载资源。这个并行传输渐进式图像的想法和HTTP/2本身一样古老，但是它需要在web服务器的底层进行特殊处理，到目前为止还没有大规模地实现。当我们改进我们的HTTP/2优先级时，我们意识到它也可以用来实现这个特性。图像文件作为一个整体既不是高优先级也不是低优先级。每个文件中的优先级都会发生变化，而动态的优先级重新排序则会为我们提供所需的行为：包含图像大小的图像标题具有非常高的优先级，因为浏览器需要尽快知道大小来进行页面布局。图像头很小，因此在发送其他数据之前发送它并不有害。图像中显示图像预览所需的最小数据量具有中等优先级（我们希望尽快为卸载的图像填补"漏洞"，但也为脚本、字体和其他资源留出一些可用带宽）图像数据的其余部分是低优先级的。浏览器可以在不着急的情况下将其流式传输到最后以改善图像质量，因为页面已经完全可用。要知道每个阶段要发送的确切数据量，需要了解图像文件的结构，但是让web服务器解析图像响应并在协议级别硬编码特定于格式的行为对我们来说似乎很奇怪。通过将问题定义为优先级的动态变化，能够优雅地将低级网络代码与图像格式知识区分开来。我们可以使用worker或离线图像处理工具来分析图像，并指示服务器更改HTTP/2的优先级因此并行图像流的好处在于它不会增加任何开销。我们仍然发送相同的数据，相同的数据量，我们只是以更明智的方式发送。这种技术利用了现有的web标准，因此它与所有浏览器waterwallhere是来自webgetest的瀑布图，显示了常规HTTP/2响应和渐进流的比较。在这两种情况下，文件是完全相同的，传输的数据量是相同的，总的页面加载时间是相同的（在测量噪声范围内）。在图表中，蓝色部分显示数据传输的时间，绿色部分显示每个请求的传输时间闲着。那个第一个图表显示了一个典型的服务器行为，它使图像大部分按顺序加载。图表本身看起来很整洁，但实际加载该页面的体验并不理想-直到几乎结束。那个第二个图表显示并行加载的图像。整个图表中的蓝色垂直条纹是早期发送的图像标题，随后是两个阶段的渐进式渲染。您可以看到，对于所有图像，有用的数据提前到达。您可能会注意到其中一个图像是以一个块的形式发送的，而不是像其他所有的图像一样被拆分。这是因为在TCP/IP连接的一开始，我们还不知道连接的真正速度，我们必须牺牲一些机会来进行优先级排序，以使连接最大化速度。那个与其他解决方案相比，还有其他一些技术旨在快速提供图像预览，例如低质量图像占位符（LQIP），但它们有几个缺点。它们会为占位符添加不必要的数据，并且通常会干扰浏览器的预加载扫描程序，并且由于依赖于将预览升级到完整版本所需的JavaScript，所以延迟了全质量图像的加载图像。我们的解决方案不会引起任何额外的请求，也不会添加任何额外的数据。总页面加载时间不是延迟了。我们的解决方案不需要任何JavaScript。它利用了本机支持的功能浏览器。我们的这个解决方案不需要对页面的标记进行任何更改，所以它非常安全并且易于部署站点-宽。那个用户体验的改善反映在性能指标上，如SpeedIndex度量和可视化完成时间。请注意，对于常规图像加载，视觉进度是线性的，但对于渐进式流媒体，它很快就会跳到大部分完成：获取大多数渐进式渲染都避免用JavaScript破坏效果。隐藏图像并等待onload事件显示它们（使用淡入等）的脚本将失败渐进式渲染。渐进式渲染最适合使用旧的

元素。只有JPEG吗？我们的实现是独立于格式的，但是渐进式流式传输只对某些文件类型有用。例如，将其应用于脚本或样式表是没有意义的：这些资源呈现为all或-没什么。优先考虑所有文件都可以使用图像标题（包含图像大小）格式渐进式渲染的好处是JPEG（所有浏览器都支持）和JPEG2000（Safari支持）所独有的。GIF和PNG有交错模式，但这些模式以更差的压缩为代价。WebP甚至根本不支持渐进式渲染。这就造成了一个两难的局面：WebP通常比同等质量的JPEG小20%-30%，但渐进式JPEG的加载速度似乎要快50%。下一代图像格式支持渐进式渲染比JPEG好，压缩比WebP好，但web浏览器还不支持它们。同时，您可以通过更改Cloudflare中的波兰语设置，在WebP的带宽节省和渐进式JPEG更好的性能之间进行选择仪表板。自定义header for Experimentation我们还支持一个定制的HTTP报头，它允许您在站点上试验和优化其他资源的流。例如，您可以让我们的服务器以高优先级发送第一帧动画gif，然后取消其他帧的优先级。或者您可以在加载之前优先加载HTML文档的中提到的资源。只能从辅助进程设置自定义标头。语法是一个逗号分隔的文件位置列表，具有优先级和并发性。优先级和并发性与前一篇博客中描述的整个文件cf priority头中的相同邮政编码-优先级更改：：/。。。例如，对于渐进式JPEG，我们使用类似（这是一个JS片段，用于Worker）：let headers=new headers(响应.headers);标题.set（"cf优先级"，"30/0"）；标题.set（"cf优先级更改"，"512:20/115000:10/n"）；返回新响应(响应.正文，{headers}）；它指示服务器最初使用优先级30，同时发送前512个字节。然后切换到优先级20，并进行一些并发操作（/1），最后在发送之后