渐进式图像并行流, 实现网页图像快速渲染( 五 )

2019-05-15

显示图像预览所需的图像的最小数据量具有中等优先级。

图像数据的其余部分为低优先级。由于页面已经完全可用，因此浏览器可以在最后一次流式传输优化图像质量。

要搞清楚每个阶段要发送的数据量需要了解图像文件的结构，通过将问题框定为优先级的动态变化，能够优雅地将低级网络代码与图像格式知识分开。可以使用Workers或离线图像处理工具来分析图像，并预先处理服务器更改HTTP/2优先级。

关于图像并行流可以代理上面提到各种好处，但是也不会增加服务器和带宽开销。数据文件大小仍然一样，只不过优化其下载传输的顺序。

这种技术只是对现有Web标准使用，兼容主要的主流浏览器。

性能测试

官方通过WebPageTest对这种技术进行了性能基准测试，对比了HTTP/2响应和渐进式流式传输，其结果瀑布图如下：

注意：对完全完全相同的页面和下数据，图像显示了整个页面加载时间相同。在图表中，蓝色部分显示数据传输时间，绿色显示每个请求空闲时。

推荐阅读

上一篇：狗狗咬伤人，责任怎么算？

下一篇：氪星晚报 | 腾讯公布2019年第一季度营收，金融科技及企业服务收入同比增长四成；滴滴青桔单车入京，将逐渐替换小蓝单车；氪空间完成10亿元融资