图文网页，在屏幕显示范围外的图片全换成 16*16 超低像素占位图（只能看到颜色，像 tg 那种）能提高性能吗？有用户反馈滑动卡顿，排查了一下那篇文章图片太多了，确实有点卡
drymonfidelia · 195 天前 · 1393 次点击这是一个创建于 195 天前的主题，其中的信息可能已经有所发展或是发生改变。
然后页面打开时用 ajax 加载全部正常预览图，出现在屏幕上的时候再用 blob url 换回去
另外我记得之前看见过一个开源项目，能用几个字母数字表示原图的颜色信息，可以解码成 tg 那种占位图，搜不到了，有没有 V 友知道叫什么名字
另外我记得之前看见过一个开源项目，能用几个字母数字表示原图的颜色信息，可以解码成 tg 那种占位图，搜不到了，有没有 V 友知道叫什么名字
14 条回复 • 2024-05-11 17:28:38 +08:00
 |
1
notproblem 195 天前
可以的，这种方式减少了网络传输，也减少了图片内存占用。
还有一种解决办法就是分页显示，比较简单 |
 |
2
lichdkimba 195 天前
懒加载
|
 |
3
kdwnil 195 天前 via Android
能不能提升性能不清楚；那种占位图叫 blurhash
|
 |
4
drymonfidelia OP @kdwnil 谢谢，想找的是这个
|
 |
5
lslqtz 195 天前
感觉懒加载的话性能会更好, 还能保证不在页面范围内的区域没有图片, 以减少同页面图片数量.
|
|
6
drymonfidelia OP |
|
7
drymonfidelia OP @drymonfidelia 另外文字的高度好像不好准确计算
|
|
8
lslqtz 195 天前
一般文字不采用懒加载, 除非小说翻页类的功能.
懒加载相比占位图片的优势是: 浏览器不需要渲染不存在的图片. 但具体性能提升可能要具体到用例, 难以量化. |
 |
9
Opportunity 195 天前
先加个 content-visibility: auto 试试
|
 |
10
HOMO114514 195 天前 via iPhone
有点 off topic ，但是想分享一下微博 PC 端的显示逻辑
微博自始至终只有出现在屏幕的几张卡片渲染，当滚动时，重复：移出屏幕外的卡片销毁-渲染进入屏幕范围内的卡片，这一流程 但如果有去广告插件，一些广告的 Dom 被屏蔽/删除之后，会导致相邻卡片的高度计算错误，从而经常导致某些地方的微博卡片错位或者重合 既然微博能够实现这种用法，就代表你所设想的这个类似&简化的逻辑必然能够实现 |
 |
11
zhtyytg 194 天前
抛开具体使用环境谈优化无稽之谈。
如果网络好设备差，可以使用懒加载初步优化 如果网络差设备性能尚可，可以使用虚拟列表初步优化 如果网络差设备差，应该考虑更换设备和网络 |
|
12
drymonfidelia OP @zhtyytg 第三种情况，我怎么更换用户的设备和网络
|
|
13
zhtyytg 194 天前
@drymonfidelia 那不是你应该考虑的问题，开发又不是神仙，谁会希望在牙刷屏显上看 b 站视频呢？
|
 |
14
csl123 194 天前
@chowdpa02k413 @zhtyytg 补充一下关键词 虚拟列表
|
Select Language