小程序列表数据加载优化,百万数据丝滑运行
天闲着无聊想练一下手速,去上拉一个小程序项目中一个有1万多条商品数据的列表。在数据加载到1000多条后,是列表居然出现了白屏。看了一下控制台:
‘Dom limit exceeded’,dom数超出了限制, 不知道微信是出于什么考虑,要限制页面的dom数量。
一.小程序页面限制多少个wxml
节点?
写了个小dome做了个测试。 listData的数据结构为:
listData:[
{
isDisplay:true,
itemList:[{
qus:'下面哪位是刘发财女朋友?',
answerA:'刘亦菲',
answerB:'迪丽热巴',
answerC:'斋藤飞鸟',
answerD:'花泽香菜',
}
.......//20条数据
]
}]
页面渲染效果:
{
{item.qus}}
A. {
{item.answerA}}
B. {
{item.answerB}}
C. {
{item.answerC}}
D. {
{item.answerD}}
2.dome2,删除了不必要的dom嵌套
{
{item.qus}}
A. {
{item.answerA}}
B. {
{item.answerB}}
C. {
{item.answerC}}
D. {
{item.answerD}}
通过大致计算,一个小程序页面大概可以渲染2万个wxml
节点 而小程序官方的性能测评得分条件为少于1000个wxml
节点官方链接
二.列表页面优化
1.减少不必要的标签嵌套
由上面的测试dome可知,在不影响代码运行和可读性的前提下,尽量减少标签的嵌套,可以大幅的增加页面数据的列表条数,毕竟公司不是按代码行数发工资的。如果你的列表数据量有限
weixin_47264988: 一看就是瞎说的
m0_71364817: 为啥输入单词后查询不出结果?
m0_64940301: 可以要动画小球的源码么
Pekoes: 小程序登录地址同公众号登录是一个地址,这种设定就很zz
江南*: 自己定义呀,var _animation; var _animationIndex; var _animationIntervalId; const _ANIMATION_TIME = 500; var _loadImagePathIndex = 90;