Cloudflare为提高网页图片呈现速度开发出平行串流渐进式

Cloudflare开始为用户提供平行串流的渐进式图像加载功能，能让浏览器更快地渲染出图片。渐进式图像加载技术是指，图像从低阶细节到高阶细节迭加渲染，当浏览器先收到低细节的图像数据，则先绘制分辨率较低的画面，随着收到更多细节的图像数据，则浏览器渲染出来的图片会越来越清楚锐利，而一般的图像加载顺序则是从上到下，浏览器收到多少数据就渲染多少，收到一半则渲染一半的图像。不过，非平行串流的渐进式加载图片效果并不会更好，因为服务器仍会依序传送图像，图像到客户端浏览器仍是按照顺序渲染，仅有传送所有图片的一半数量，在网页的视觉效果呈现上，并不会比传送所有图像一半的数据还要好（下图），再来，由于浏览器无法一开始就知道所有图片的大小，因此会先在网页上放置占位符，当图片加载的时候，整个页面布局会因为图片大小改变不断跳动，影响使用者浏览体验。

而Cloudflare新打造的平行串流渐进式图像技术，能同时平行发送所有图像，浏览器能以最快的速度取得所有图像大小，先渲染所有图像预览，即便庞大的图像档案也不会延误样式、脚本和其他重要资源的加载。虽然HTTP/2支持多任务（Multiplexing）技术。但要使用平行串流渐进式图像，要对网页服务器进行低阶的特殊处理，实作出动态优先的功能，让带有图像大小的头文件最优先送出（下图），接着送出中度优先的页面图像数据，让所有图像都能达最小可预览程度，而剩下的图像数据为最低优先级，浏览器可以慢慢的渲染出最终的图像。

Cloudflare提到，新的方法并不会增加任何额外的传送成本，因为发送的数据量仍然一样，只是以更智能的方式调整发送的顺序。Cloudflare比较了图像应用一般HTTP/2，以及平行串流渐进式技术加载的时间，（左图）服务器依序传送图片，越快传送的图片越快被浏览器渲染，而越后传送的图像则花费的时间越长，（右图）使用平行串流渐进式图像技术加载图片时，虽然所有图像渲染完成的时间，与一般HTTP/2方法差不多，但是以视觉效果来说，只要一半的时间就能达到与最终图像相当的效果。

渐进式图像加载技术使用JPEG格式效果很好，Cloudflare指出，约只要收到10-15％的数据就能显示图像预览，收到50％的图像数据，其视觉效果看起来跟最终图片几乎一样。虽然Cloudflare的平行串流技术与格式无关，但是渐进式图像技术仅为JPEG与JPEG 2000特有，Cloudflare表示，虽然另外常用网页图像格式WebP比同样质量的JPEG图像，档案大小少约20％-30％，但是WebP并不支持渐进式渲染，而渐进式图像可以提高图像加载速度约达50％，因此网页开发者需要依需求权衡采用的解决方案。

转载于:https://blog.51cto.com/13373212/2395633