用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

小程序长列表优化实践

Rolan 2021-6-9 00:39

一个页面限制多少个wxml节点 页面WXML节点少于 1000 个,节点树深度少于 30 层,子节点数不大于 60 个 小程序性能评分具体内容参考官方链接 列表页面优化 减少不必要的标签嵌套 优化setData的使用 小程序setDat ...

一个页面限制多少个wxml节点

页面WXML节点少于 1000 个,节点树深度少于 30 层,子节点数不大于 60 个

小程序性能评分具体内容参考官方链接

列表页面优化

  1. 减少不必要的标签嵌套
  2. 优化setData的使用

小程序setDate的性能会受到setData数据量大小和调用频率限制。所以要围绕减少每一次setData数据量大小,降低setData调用频率进行优化。#####(1)删除冗余字段 后端的同事经常把数据从数据库中取出就直接返回给前端,不经过任何处理,所以会导致数据大量的冗余,很多字段根本用不到,我们需要把这些字段删除,减少setDate的数据大小。#####(2)setData的进阶用法 通常,我们对data中数据的增删改操作,是把原来的数据取出,处理,然后用setData整体去更新,比如我们列表中使用到的上拉加载更多,需要往listData尾部添加数据:

 newList=[{...},{...}];
   this.setData({
     listData:[...this.data.listData,...newList]
   })
复制代码

这样会导致setDate的数据量越来越大,页面也越来越卡。

  • setData的正确使用姿势

比如我们要修改数组listData第一个元素的isDisplay属性,我们可以这样操作:

  let index=0;
  this.setData({
     [`listData[${index}].isDisplay`]:false,
  })
复制代码

如果我们想同时修改数组listData中下标从0到9的元素的isDisplay属性,那要如何处理呢?你可能会想到用for循环来执行setData:

    for(let index=0;index<10;index++){
     this.setData({
        [`listData[${index}].isDisplay`]:false,
     })
  }
复制代码

那么这样就会导致另外一个问题,那就是listData的调用过于频繁,也会导致性能问题,正确的处理方式是先把要修改的数据先收集起来,然后调用setData一次处理完成:

  let changeData={};
  for(let index=0;index<10;index++){
      changeData[[`listData[${index}].isDisplay`]]=false;
  }
  this.setData(changeData);
复制代码

这样我们就把数组listData中下标从0到9的元素的isDisplay属性改成了false。

- setData往数组末尾添加数据

如果只添加一条数据

 let newData={...};
  this.setData({
    [`listData[${this.data.listData.length}]`]:newData
  })
复制代码

如果是添加多条数据

 let newData=[{...},{...},{...},{...},{...},{...}];
  let index=this.data.listData.length
    newData.forEach((item) => {
        newData['listData[' + (index++) + ']'] = item //赋值,索引递增
    }) 
  this.setData(newData)
复制代码

使用自定义组件

可以把列表的一行或者多行封装到自定义组件里,在列表页使用一个组件,只算一个节点,这样你的列表能渲染的数据可以成倍数的增加。组件内的节点数也是有限制的,但是你可以一层层嵌套组件实现列表的无限加载,如果你不怕麻烦的话

使用虚拟列表

经过上面的一系列操作后,列表的性能会得到很大的提升,但是如果数据量实在太大,wxml节点数也会超出限制,导致页面发生错误。我们的处理方法是使用虚拟列表,页面只渲染当前可视区域以及可视区域上下若干条数据的节点,通过isDisplay控制节点的渲染。

  • 可视区域上方:above
  • 可视区域:screen
  • 可视区域下方:below


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Carrie 来自: 掘金