DataUrl base64代替图片地址的前端性能实测

最新推荐文章于 2024-08-03 22:09:54 发布
最新推荐文章于 2024-08-03 22:09:54 发布
阅读量754 收藏 1
点赞数 2
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39921970/article/details/113741457
版权

从内存、CPU、加载速度

img+图片路径
img+DataUrl
在这里插入图片描述
bg+图片路径
bg+DataUrl
在这里插入图片描述

结果如下这个表格，基本能看出些优缺点：在这里插入图片描述
DataUrl优点

  • 图体积小的情况下，占用多个http请求，可以用css sprite（雪碧图），如下
    【图标】可以用iconfont代替，【多色标题】是无法使用iconfont就可以使用雪碧图
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021022317271639.jpg在这里插入图片描述
    多色标题（这个是不能用iconfont方式）
    在这里插入图片描述
  • 当图片资源不能用的时候，如微信小程序的wcss结构里 background不能使用图片路径，可以用DataUrl
  • 服务器端动态生成的图片，如分销二维码

DataUrl缺点

  • 从上面表格可以看出，100kb的图片转为base64，文件体积138kb，增加了30%多

其他前提相同，强刷30次大致数值如下：从CPU和内存的增长上可以看出
①变量：img+DataUrl
在这里插入图片描述
在这里插入图片描述
②img+图片路径
在这里插入图片描述
以上的实测是想验证下其他文章描述的情况：“使用Data URL方式的Demo在渲染时会比不使用 多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍 。”

基于一个图片的dataurl和图片路径的区别并不明显，这里只先说明一个方向和思路，大致的优劣点已经可以在日常中选择使用，后续会继续更新多个图片路径和多个dataurl的情况下的情况

··零··
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html本地路径图片转成base64,canvas-toDataURL()将图片转为dataURL（base64）
weixin_33532631的博客
06-19 2479
将图片转为base64的好处将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量(集合到js、css代码中)，还可以防止因为一些相对路径等问题导致图片404错误。一个应用场景：由于某些特殊原...
前端下载base64文件；base64转blob
i_am_a_div的博客
12-15 2666
前端下载base64文件；base64转blob
浏览器测试 Base64 字符是否是正确图片
zhoulijia666的博客
05-13 460
浏览器 url : data:image/jpeg;
前端实现Base64图片压缩(可直接复制使用)
热门推荐
陈坚泓的博客
07-29 4万+
前端实现Base64图片压缩
图片地址转换base64
qq_53749423的博客
01-30 1236
图片地址转换base64。
Data Url简介（base64图片编码）
yiyueqinghui的博客
02-15 2219
Data Url简介（base64图片编码） Data Url简介 Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。 Dat...
前端图片base64相互转换
weixin_42369612的博客
01-17 1292
前端图片转base64字符串 uploadFile(e){ let file = e.target.files[0] //获取当前用户选择的图片 const newFileFormated = new File([file],file.name,{file:file.type}) const fileReader = new FileReader() fileReader.onload = (e) => { const dataURL = e.target.result co
JavaScript 图片url地址转base64
vanora1111的博客
03-22 4127
记录来自于每一次的实际需求；此次需要做的是将拿到的图片，转png格式下载，看了下数据库返回的地址，有png、svg、jpg格式，我的想法是先通通转base64，再处理成png下载。
Android进阶之路 - 双端交互之传递Base64图片
Android、前端、小程序、后端
06-01 2507
前端、H5、移动端之间图片传递的方式，主要涉及到双端通过base64传值的处理方法
前端Base64编码知识,一文打尽
趣谈前端
08-18 1196
原文: https://juejin.cn/post/6989391487200919566作者: 云的世界掘金专栏: 前端基础进阶健康满分关注并将「趣谈前端」设为星标每天定时分享技术...
前端图片压缩base64后台还原图片
04-19
前端图片压缩base64是优化网页性能的重要手段，结合后台还原图片功能，可以在不影响用户体验的前提下，显著减少网络传输的数据量。理解这一过程的工作原理，以及如何在前端和后端实现，对于开发高性能的Web应用至关...
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
11-27
假设一个应用场景：由于某些特殊原因从服务端请求到图片路径，要求通过该路径获取对应图片的 base64 dataURL。在这个场景中，我们首先推断该图片路径是可访问的，同时还需要一种将图片转换到 dataURL 的方法
JS实现图片转换成base64的各种应用场景实例分析
10-18
在本文中，我们将深入探讨如何使用JavaScript将图片转换为Base64编码，并讨论其在不同场景下的应用。 首先，让我们看看场景一：将用户本地上传的资源转化为Base64。这种场景通常发生在用户通过浏览器上传图片时。...
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
11-26
为了解决这个问题，我们可以将Base64编码的图片转换为Blob对象，并将其放入FormData对象中，然后通过AJAX提交。以下是如何实现这一过程的详细步骤： ### 第一步：Base64转Blob Base64编码的图片数据中包含了图片的...
【网页前端设计HTML】超链接
weixin_53597021的博客
08-03 670
超链接，英文名是hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。
HTML 专业词汇与语法规则
最新发布
m0_74012211的博客
08-03 178
HTML 专业词汇与语法规则
4个自定义倒计时
lulei5153的博客
08-03 201
【代码】4个自定义倒计时。
【Dash】使用 HTML 和 CSS 创建图表
u010528690的博客
08-03 757
【代码】【Dash】使用 HTML 和 CSS 创建图表。
前端 base64转图片
05-11
可以使用以下代码将 base64 转换为图片： ```javascript function base64ToImage(base64String, filename) { var img = new Image(); img.src = base64String; img.onload = function () { var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); var a = document.createElement('a'); a.href = dataURL; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; } ``` 使用方法： ```javascript var base64String = 'your base64 string'; var filename = 'your filename'; base64ToImage(base64String, filename); ``` 其中，`base64String` 是要转换的 base64 字符串，`filename` 是要保存的文件名。该方法会将图片下载到本地。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

··零··

您的鼓励，是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值