评论

复杂瀑布流长列表页踩坑记录,内存不足问题【2】

主要是解决小程序无限滚动瀑布流页面引起的ios内存不足,自动退出问题

第二期来啦,带来了新的方案和代码片段~

第一期点此查看

上期问题

经过一系列的实践,上期的方案有些问题,其中最麻烦的就是,需要对外传递一个当前index,然后控制前后数据展示;这里对于每个用到skeleton组件的页面来说,都要重复的写一个方法来承接这个index,然后渲染页面对应的数据。

优化

依然是监听skeleton曝光,这里监听的方案变为出现在屏幕上下n屏的内容块进行展示,此范围外的内容块就卸载掉。

核心代码

     // 修改了监听是否显示内容的方法,改为前后showNum屏高度渲染
     // 监听进入屏幕的范围relativeToViewport({top: xxx, bottom: xxx})
      let info = SystemInfo.getInfo() //获取系统信息
      let { windowHeight = 667 } = info.source.system
      let showNum = 2 //超过屏幕的数量,目前这个设置是上下2屏
      let listItemContainer = this.createIntersectionObserver()
      listItemContainer.relativeToViewport({ top: showNum * windowHeight, bottom: showNum * windowHeight })
        .observe(`#list-item-${this.data.skeletonId}`, (res) => {
        	// 此处来控制slot展示,详见代码片段
        })
       

干货

话不多说,干货放后面,点击获取代码片段

点赞 5
收藏
评论

4 个评论

  • Raul
    Raul
    2019-12-20
     // 修改了监听是否显示内容的方法,改为前后showNum屏高度渲染
         // 监听进入屏幕的范围relativeToViewport({top: xxx, bottom: xxx})
          let info = SystemInfo.getInfo() //获取系统信息
          let { windowHeight = 667 } = info.source.system
          let showNum = 2 //超过屏幕的数量,目前这个设置是上下2屏
          let listItemContainer = this.createIntersectionObserver()
          listItemContainer.relativeToViewport({ top: showNum * windowHeight, bottom: showNum * windowHeight })
            .observe(`#list-item-${this.data.skeletonId}`, (res) => {
            	// 此处来控制slot展示,详见代码片段
            })
    


    这个视口的top 和 bottom 不是应该为负值吗?

    2019-12-20
    赞同
    回复 1
    • 宗仔GEG
      宗仔GEG
      2019-12-20
      向内是负值,向外是正值
      2019-12-20
      回复
  • ·L
    ·L
    2019-12-11

    想问下,为什么占位用的<view>要用<slot>插入到skeleton里面,而不是直接在组件内部直接用<view>占位


    2019-12-11
    赞同
    回复 6
    • 宗仔GEG
      宗仔GEG
      2019-12-11
      组件如果不从页面销毁,组件实例还是存在的,虽然没有渲染,但是这个实例也会占用内存
      2019-12-11
      回复
    • ·L
      ·L
      2019-12-11回复宗仔GEG
      emmm,通过slot插入到组件里面,组件不是也没有销毁么,只是控制了显示、隐藏slot部分啊
      2019-12-11
      回复
    • 宗仔GEG
      宗仔GEG
      2019-12-11回复·L
      slot里面的组件销毁了,如果你是在组件里面的话,那这个组件是不会销毁的,这个解决的是组件复杂的情况下,用骨架来套一下,做高度placeholder
      2019-12-11
      回复
    • ·L
      ·L
      2019-12-11回复宗仔GEG
      那我懂是什么意思了,还有个问题,小程序能具体的检测到内存的变化么,除了安卓手机上的性能面板
      2019-12-11
      回复
    • 宗仔GEG
      宗仔GEG
      2019-12-11回复·L
      不能,坑,哈哈哈
      2019-12-11
      回复
    查看更多(1)
  • 梧桐树
    梧桐树
    2019-12-06

    2019-12-06
    赞同
    回复
  • 。...
    。...
    2019-12-05

    mark,先看代码片段学习一下,请问有遇见过频繁进出live-player组件的页面时候有一部分内存不释放的问题么.......

    2019-12-05
    赞同
    回复 2
    • 宗仔GEG
      宗仔GEG
      2019-12-05
      没有哦,目前没有用过这个组件,但是建议可以多检查下是否有闭包或者外部引用导致内存没释放
      2019-12-05
      回复
    • 。...
      。...
      2019-12-06回复宗仔GEG
      我把页面删的就这个组件了,还是涨......
      2019-12-06
      回复
登录 后发表内容