被销毁的 dom 元素里加载过的网络图片重新生成 dom 并请求 要重新加载？

[mrsongopen1]

如题，我最近再做长列表图文瀑布流的时候，采用的方案是 当 dom 不在屏幕视口范围内的时候 view 留空占位给一个原始高度。里面的 dom 结构（包括 图片）当然就被销毁了，但当 回头看之前的 信息流的时候， 网络图片又重复加载了一次， 按说不应该是请求 http 网络缓存中的数据吗？ 我的图片云存储 已经 设置了 Cache-Control: public, must-revalidate, max-age=691200， 这导致我每次 查看到视口范围内的信息流时 都要重复加载图片，是我哪里没有设置好 还是 被销毁过的 dom 结构中的网络请求 没有缓存策略？

[0000zjn]

🐴一个，也想知道

[DFshpAq3]

我猜测文中所指的销毁 dom 指的是设置元素属性 display: none，使用此方法会导致 dom 元素从 render tree 中移除，导致的结果就是取消隐藏元素的代价和渲染一个新的 dom 一样昂贵（加载图片会再次触发网络请求，并且触发 Reflow，徒增计算量），你应该使用 content-visibility: hidden 或者 visibility: hidden 来“隐藏” dom

本来准备附上一篇关于 CSS 属性影响图片 Cache 的文章的，可是找不到了。只能凭着记忆答一波，可能有错误，欢迎指正

[xingguang]

dom 销毁了，里面的内容也就销毁了，再展示要重新去构建 dom 的，除非手动去缓存，但是这样缓存也影响性能，不如重新去创建了。