被销毁的 dom 元素里加载过的网络图片重新生成 dom 并请求 要重新加载？
mrsongopen1 · 2020-12-18 19:24:54 +08:00 · 1593 次点击这是一个创建于 1434 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，我最近再做长列表图文瀑布流的时候，采用的方案是 当 dom 不在屏幕视口范围内的时候 view 留空占位给一个原始高度。里面的 dom 结构（包括 图片）当然就被销毁了，但当 回头看之前的 信息流的时候， 网络图片又重复加载了一次， 按说不应该是请求 http 网络缓存中的数据吗？ 我的图片云存储 已经 设置了 Cache-Control: public, must-revalidate, max-age=691200， 这导致我每次 查看到视口范围内的信息流时 都要重复加载图片，是我哪里没有设置好 还是 被销毁过的 dom 结构中的网络请求 没有缓存策略？
 |
1
0000zjn 2020-12-19 14:18:08 +08:00 via iPhone
🐴一个，也想知道
|
 |
2
DFshpAq3 2020-12-19 16:28:50 +08:00
我猜测文中所指的销毁 dom 指的是设置元素属性 display: none，使用此方法会导致 dom 元素从 render tree 中移除，导致的结果就是取消隐藏元素的代价和渲染一个新的 dom 一样昂贵（加载图片会再次触发网络请求，并且触发 Reflow，徒增计算量），你应该使用 content-visibility: hidden 或者 visibility: hidden 来“隐藏” dom
本来准备附上一篇关于 CSS 属性影响图片 Cache 的文章的，可是找不到了。只能凭着记忆答一波，可能有错误，欢迎指正 |
 |
3
xingguang 2020-12-30 15:11:08 +08:00
dom 销毁了，里面的内容也就销毁了，再展示要重新去构建 dom 的，除非手动去缓存，但是这样缓存也影响性能，不如重新去创建了。
|
Select Language