这是一个创建于 665 天前的主题，其中的信息可能已经有所发展或是发生改变。
图片 2k,base64 3k 。
页面上渲染 3000 个图片，性能上有差距吗。
页面上渲染 3000 个图片，性能上有差距吗。
 |
1
for8ever 2023-01-29 11:19:50 +08:00
有区别，base64 可以减少 HTTP 请求，对于小图片用 base64 更好
|
 |
2
loading 2023-01-29 11:25:37 +08:00
base64 就是要等 html 全部下载完才渲染（？）
我觉得你应该看看 雪碧图 |
 |
3
opengps 2023-01-29 11:42:01 +08:00
网络连接数可能占用更少，但 cpu 占用会更多
|
 |
4
matepi 2023-01-29 11:43:07 +08:00
浏览器也是能并发连接的啊
|
 |
5
okakuyang 2023-01-29 11:54:44 +08:00
什么场景这么极端
|
 |
7
uasier 2023-01-29 11:57:22 +08:00
合理操作应该是雪碧图
|
|
8
uasier 2023-01-29 11:58:00 +08:00
同时也可以看看是否需要懒加载
|
 |
9
retrocode 2023-01-29 12:00:20 +08:00
网页的话还是建议图片形式, 好歹可以懒加载, 图片转 base64 后体积会变大, 你还是要等数据加载完才能渲染,而且更慢
转 base64 只适合散碎图片,如图标之类的, 整合成一个文件加快加载速度, 如果是本地页面的话, 你想骚套路也不是不可以,随便搞, 还能方便加密混淆 |
 |
10
mxT52CRuqR6o5 2023-01-29 12:01:31 +08:00
3000 个图片传统方案是雪碧图 /fonticon ，对业务代码有一定入侵
|
 |
11
churchill 2023-01-29 12:15:38 +08:00
看到 雪碧图 这个翻译忍不住要吐槽
|
 |
12
zephyru 2023-01-29 12:23:00 +08:00
一个可视区内为例，3000 张一个可视区，用 base64 大概是，先等所有图片下载完再展示（我就当你是嵌在 html 里了）
相对路径则是先展示轮廓再展示，浏览器并发，不同浏览器不一样通常是 6 ～ 8 个，所以 3000 张同屏怎么也会有先后顺序 你要全部加载完哪个更快？主要看设备，通常来说，一个大文件会比 3000 个小文件快，取决于大小差异和实际使用的 http 协议，用 http3.0 的话，小文件估计会快一点，1.0 大文件会快一点。 个人建议，用相对路径，需要一次性展示的话自己控制图片的加载完再展示，而不是使用 base64 这样完全不可控。 一个可视区放不下的情况，比如滚动加载，就别 base64 了，没啥意义。 |
 |
13
IvanLi127 2023-01-29 12:28:25 +08:00 via Android
3000 个图片。。要不 http/2.0 ？
|
 |
14
Huelse 2023-01-29 13:20:00 +08:00
如果图片要更新的话不如懒加载，看那些壁纸站也是这么做的
|
 |
15
unt OP 是 3000 张相同的图片，可以认为是图标， 我说的有歧义，骚瑞~
|
 |
16
28Sv0ngQfIE7Yloe 2023-01-29 13:58:11 +08:00
3000 是每次固定还是随机？
|
 |
17
tigaDark 2023-01-29 15:52:35 +08:00
1.一个页面放下了 3000 个图片,也无法全部显示
|
|
18
tigaDark 2023-01-29 15:56:39 +08:00
2.静态资源+相对路径 用的是 http 获取图片
3.base64 则是用类似字符码? 直接显示在页面上 4.浏览器的 http 并发请求大概是 8-10 条 5.性能得看你的电脑配置,图片大小 综合看... |
 |
20
Alander 2023-01-29 16:41:12 +08:00
一个页面放得下 3000 个图片？如果放不下就懒加载随便怎么选；如果放得下 http1.1 就用雪碧图吧
|
 |
21
laqow 2023-01-29 18:52:14 +08:00
感觉看引擎和硬件渲染。另外渲染 css 背景，img 标签，或者 appendChild Image 对象的性能应该都不同
|
 |
22
daoqiongsi1101 2023-01-29 18:55:10 +08:00
@for8ever 用 http/2 协议就没你说的这个问题
|
 |
23
cleveryun 2023-01-29 21:05:40 +08:00 via Android
@unt 3000 个相同图片的话，那必然是用 http 地址比 base64 好，而且好太多了，3000 个一样的 http 地址，你只为图片浪费了 2k 带宽，3000 个 base64 你需要 3k x 3000 =9000k 带宽。你审查下用 base64 的 img 标签，内容是直接塞进 html 里的，有几个就是几倍的大小。
|
 |
24
janus77 2023-01-29 21:40:26 +08:00
肯定不是一个屏幕几千张啊。用懒加载就行了，一个屏幕最多也就一百张左右
|
 |
25
superares 2023-01-29 23:08:45 +08:00 via iPhone
可以看下 Google 的图片搜索，前面两排左右的结果是 base64 ，后面的就是图片地址了。base64 就是为了快速出图片，但是不适合大量图片
|
Select Language