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

資深大佬 : mrsongopen1 6

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

大佬有話說 (2)

資深大佬 : 0000zjn

資深大佬 : DFshpAq3

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

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

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

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

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