图文网页，在屏幕显示范围外的图片全换成 16*16 超低像素占位图（只能看到颜色，像 tg 那种）能提高性能吗？有用户反馈滑动卡顿，排查了一下那篇文章图片太多了，确实有点卡

[drymonfidelia]

然后页面打开时用 ajax 加载全部正常预览图，出现在屏幕上的时候再用 blob url 换回去
另外我记得之前看见过一个开源项目，能用几个字母数字表示原图的颜色信息，可以解码成 tg 那种占位图，搜不到了，有没有 V 友知道叫什么名字

[notproblem]

可以的，这种方式减少了网络传输，也减少了图片内存占用。
还有一种解决办法就是分页显示，比较简单

[lichdkimba]

懒加载

[kdwnil]

能不能提升性能不清楚；那种占位图叫 blurhash

[drymonfidelia]

@kdwnil 谢谢，想找的是这个

[lslqtz]

感觉懒加载的话性能会更好, 还能保证不在页面范围内的区域没有图片, 以减少同页面图片数量.

[drymonfidelia]

文字也需要懒加载吗？这样的话如果用户网络不好，滑动一段距离后图文都显示不出来用户体验好像不太好。另外图片用空白 div 的话性能会比 blurhash 好多少？
@lslqtz
@lichdkimba

[drymonfidelia]

@drymonfidelia 另外文字的高度好像不好准确计算

[lslqtz]

一般文字不采用懒加载, 除非小说翻页类的功能.
懒加载相比占位图片的优势是: 浏览器不需要渲染不存在的图片. 但具体性能提升可能要具体到用例, 难以量化.

[Opportunity]

先加个 content-visibility: auto 试试

[HOMO114514]

有点 off topic ，但是想分享一下微博 PC 端的显示逻辑

微博自始至终只有出现在屏幕的几张卡片渲染，当滚动时，重复：移出屏幕外的卡片销毁-渲染进入屏幕范围内的卡片，这一流程

但如果有去广告插件，一些广告的 Dom 被屏蔽/删除之后，会导致相邻卡片的高度计算错误，从而经常导致某些地方的微博卡片错位或者重合

既然微博能够实现这种用法，就代表你所设想的这个类似&简化的逻辑必然能够实现

[zhtyytg]

抛开具体使用环境谈优化无稽之谈。
如果网络好设备差，可以使用懒加载初步优化
如果网络差设备性能尚可，可以使用虚拟列表初步优化
如果网络差设备差，应该考虑更换设备和网络

[drymonfidelia]

@zhtyytg 第三种情况，我怎么更换用户的设备和网络

[zhtyytg]

@drymonfidelia 那不是你应该考虑的问题，开发又不是神仙，谁会希望在牙刷屏显上看 b 站视频呢？

[csl123]

@chowdpa02k413 @zhtyytg 补充一下关键词 虚拟列表