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

渐进式图片渲染

网页中一般来是按照html文档中的顺序从上到下加载 。 如果浏览器只下载了一半的图像文件 , 则它只能够显示图像的上半部分 。 渐进式图像渲染技术中图片的内容不再是从上到下加载 , 而是对图片从低清晰度高清晰度接受 。 通过下载一小部分图像数据就可以在浏览器中显示整个图像 , 但图像不清晰 。 随着更多数据的下载 , 图像会越来越清晰 , 细节越详细 , 分辨率越高 。

该技术特别适合JPEG格式图像渲染 , 开始我们只需10-15%的数据就能显示预览图像 , 在50%时的数据处 , 图像看起来几乎与基本上就能显示完整图片 。 渐进式JPEG图像加载与传统方法可以使用同样的一个图片数据 , 用更优化的顺序刷新数据 , 因此渐进式图片渲染不会增加文件大小和其他的设置 , 只需将JPEG图像以频率系数方式用预定义模式重建原始图像 。 利用该技术可以让页面看起来在视觉上完整 , 加载一半时候就完整 , 更多细节可以在此后更加补充 , 直到达到高分辨率的质量 。

HTTP/2渐进式流式传输

在http/1.1下 , 网页中的多个图像从服务器请求传输时候 , 按顺训一个接一个发送 , 这对渐进式渲染没有任何效果 , 整体上图像仍然按顺序加载:

推荐阅读