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

左图显示了典型的Web服务器行为:图像大部分按顺序加载 。 图表本身看起来很整洁 , 但加载该页面的实际体验并不是很好 。 最后一张图片直到几乎结束才开始加载 。

右图显示并行情况下加载的图形:整个图表中的蓝色垂直条纹是早期发送的图像标题 , 然后是几个渐进渲染阶段 。 可以看到所有图像的有用数据会更快完成 。 我们注意到其中一个图像已经在一个块中发送 , 而不是像所有其他图像一样分割 。 那是因为在TCP/IP连接的最开始 , 还不知道连接的真正速度 , 必须先做测试牺来确定优先级 , 以便最大化连接速度 。

其他解决方案比较

业界还有其他很多技术用来实现快速提供图像预览 , 例如低质量图像占位符(LQIP) , 但它们都不可避免的存在一些缺点 。 他们为占位符添加了额外的数据 , 并且还会干扰浏览器的预加载扫描程序 , 由于依赖于将预览升级为完整图像 , 需要优先加载JavaScript , 这会延迟图像加载 。 与这些方案对比 渐进式图片并行流传输方案具有下面的优势:

不会增加额外的任何其他请求 , 也不会添加任何额外数据 。 总页面加载时间不会延迟 。

推荐阅读