今天工作中,领导说客户系统使用速度慢的原因是因为配置项中存在大量的base64图片。
看到这个解释,身为后端开发的我,一下子不是很理解,于是百度了一下。
网友回答:
前端开发中,使用base64图片的弊端是什么?
阻塞加载
在下面这样的html文件中
前面的
src="data:image/png;base64,xxx"
后面的
我们都知道,html是流式下载的,或者说浏览器加载所有文件其实都是从前往后单线程流式下载的
这种流式下载意味着前面的没加载完,我不可能先加载后面的
假设base64编码后的字符串长度为256kb,用户的网速为每个连接32kb/s,而除去这个字符串外html大小仅为32kb,其中图片前后各16kb
那么不考虑其他资源加载的情况下,用户会先在半秒后看到这个图片上面的内容,然后花费8秒加载图片,再在半秒后看到完整的网页
而如果使用外链图片
,用户会在1秒后看到没有图片的网页,并且在第8.5秒时就看到了图片(而不是9秒,随着html边下载边解析,解析到图片就已经开始下载图片了)
几k十来k的logo icon之类的可以用base64,节省网络请求次数。图片大了整个网页都要等你的图片下载完才能显示,这时候只用一个url来表示图片,等网页结构文本先加载显示,可以优化体验