APP下载

Cloudflare以平行串流渐进式载入技术,提高网页图片的呈现速度

消息来源:baojiabao.com 作者: 发布时间:2024-05-05

报价宝综合消息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%,因此网页开发者需要依需求权衡采用的解决方案。

2019-05-16 12:18:00

相关文章