美文网首页
瀑布流内存优化

瀑布流内存优化

作者: 我叫Aliya但是被占用了 | 来源:发表于2020-02-07 12:02 被阅读0次

    由于瀑布流在下拉很久后会页面上的数据和dom越开越多,以至内存暴增、应用卡顿或闪退,所以需要对已经划过去的dom节点做释放,方法有两种:

    1. 已经划过去的dom节点清空内部,保留外壳
      1.1 每加载一个dom记录高度到它的style上
      1.2 记录当前位置(index):除了它的上下5条,其它保留高度,隐藏内容
      1.3 页面滚动时计算index是否滚去,是的话index++;是否滚去,是的话index--;
    var b = document.documentElement.scrollTop || document.body.scrollTop;
    let dom = document.getElementById('cc' + index) // 记录当前位置上的dom
    if (dom.offsetTop + dom.clientHeight < b) index++
    if (dom.offsetTop > b) index && index--
    
    1. 在顶部添加一个占位dom,已经划过去的dom节点清空,高度累加到占位dom上
      2.1 高度数组(hList),每加载一个dom记录高度到hList
      2.2 记录当前位置(index):除了它的上下5条,其它高度累加到占位dom,隐藏自己
      2.3 页面滚动时计算index是否滚上去,是的话index++,hList加上滚上去的dom高度
      2.4 在底部再加添加一个占位dom,用来处理向下滚

    相关文章

      网友评论

          本文标题:瀑布流内存优化

          本文链接:https://www.haomeiwen.com/subject/kolmxhtx.html