V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mrsongopen1
V2EX  ›  编程

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

  •  
  •   mrsongopen1 · 355 天前 · 837 次点击
    这是一个创建于 355 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    3 条回复    2020-12-30 15:11:08 +08:00
    0000zjn
        1
    0000zjn  
       354 天前 via iPhone
    🐴一个,也想知道
    DFshpAq3
        2
    DFshpAq3  
       354 天前
    我猜测文中所指的销毁 dom 指的是设置元素属性 display: none,使用此方法会导致 dom 元素从 render tree 中移除,导致的结果就是取消隐藏元素的代价和渲染一个新的 dom 一样昂贵(加载图片会再次触发网络请求,并且触发 Reflow,徒增计算量),你应该使用 content-visibility: hidden 或者 visibility: hidden 来“隐藏” dom

    本来准备附上一篇关于 CSS 属性影响图片 Cache 的文章的,可是找不到了。只能凭着记忆答一波,可能有错误,欢迎指正
    xingguang
        3
    xingguang  
       343 天前
    dom 销毁了,里面的内容也就销毁了,再展示要重新去构建 dom 的,除非手动去缓存,但是这样缓存也影响性能,不如重新去创建了。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3002 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 04:47 · PVG 12:47 · LAX 20:47 · JFK 23:47
    ♥ Do have faith in what you're doing.