小程序长列表性能优化实践，最新阿里+头条+腾讯大厂Web前端笔试真题

由上面的测试dome可知，在不影响代码运行和可读性的前提下，尽量减少标签的嵌套，可以大幅的增加页面数据的列表条数，毕竟公司不是按代码行数发工资的。如果你的列表数据量有限，可以用这种方法来增加列表渲染条数。如果数据量很大，再怎么精简也超过2万的节点，这个方法则不适用。

2.优化setData的使用

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

newList=[{…},{…}];

this.setData({

listData:[…this.data.listData,…newList]

})

复制代码

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

setDate的正确使用姿势

• setDate修改数据

比如我们要修改数组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。

• setDate往数组末尾添加数据

如果只添加一条数据

let newData={…};

this.setData({

[listData[${this.data.listData.length}]]:newData

})

如果是添加多条数据

let newData=[{…},{…},{…},{…},{…},{…}];

let changeData={};

let index=this.data.listData.length

newData.forEach((item) => {

newData[‘listData[’ + (index++) + ‘]’] = item //赋值，索引递增

})

this.setData(changeData)

至于删除操作，还没有找到更好的方法，不知道大家有什么方法可以分享吗？

三.使用自定义组件

---

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

四.使用虚拟列表

---

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

• 可视区域上方：above

• 可视区域：screen

• 可视区域下方：below

图六  节点渲染示意图

1.listData数组的结构

使用二维数组，因为如果是一维数组，页面滚动需要用setData设置大量的元素isDispaly属性来控制列表的的渲染。而二维数组可以这可以一次调用setData控制十条，二十条甚至更多的数据的渲染。

listData:[

{

isDisplay:true,

itemList:[{

qus:‘下面哪位是刘发财女朋友?’,

answerA:‘刘亦菲’,

answerB:‘迪丽热巴’,

answerC:‘斋藤飞鸟’,

answerD:‘花泽香菜’,

}

…//二维数组中的条数根据项目实际情况

]

}]

2.必要的参数

data{

itemHeight:4520,//列表第一层dom高度，单位为rpx

itemPxHeight:‘’,//转化为px高度,因为小程序获取的滚动条高度单位为px

aboveShowIndex:0,//已渲染数据的第一条的Index

belowShowNum:0,//显示区域下方隐藏的条数

oldSrollTop:0,//记录上一次滚动的滚动条高度，判断滚动方向

prepareNum:5,//可视区域上下方要渲染的数量

throttleTime:200，//滚动事件节流的时间，单位ms

}

3.wxml的dom结构

 

{{item.qus}}

A. {{item.answerA}}

B. {{item.answerB}}

C. {{item.answerC}}

D. {{item.answerD}}

   

 

4.获取列表第一层dom的px高度

let query = wx.createSelectorQuery();

query.select(‘.content’).boundingClientRect(rect=>{

let clientWidth = rect.width;

let ratio = 750 / clientWidth;

this.setData({

itemPxHeight:Math.floor(this.data.itemHeight/ratio),

})

}).exec();

5.页面滚动时间节流

function throttle(fn){

let valid = true

return function() {

if(!valid){

return false

}

// 工作时间，执行函数并且在间隔期内把状态位设为无效

valid = false

setTimeout(() => {

fn.call(this,arguments);

valid = true;

}, this.data.throttleTime)

}

}

6.页面滚动事件处理

onPageScroll:throttle(function(e){

let scrollTop=e[0].scrollTop;//滚动条高度

let itemNum=Math.floor(scrollTop/this.data.itemPxHeight);//计算出可视区域的数据Index

let clearindex=itemNum-this.data.prepareNum+1;//滑动后需要渲染数据第一条的index

let oldSrollTop=this.data.oldSrollTop;//滚动前的scrotop,用于判断滚动的方向

let aboveShowIndex=this.data.aboveShowIndex；//获取已渲染数据第一条的index

let listDataLen=this.data.listData.length;

let changeData={}

//向下滚动

if(scrollTop-oldSrollTop>0){

if(clearindex>0){

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-0nD3h8UT-1712765537255)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-hzNuBEzm-1712765537255)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-K6IsMySs-1712765537255)]