base64图片弊端_学习

创始人

2024-06-03 10:27:01

今天工作中，领导说客户系统使用速度慢的原因是因为配置项中存在大量的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来表示图片，等网页结构文本先加载显示，可以优化体验