支付宝小程序 列表加载卡顿

[qiuziz]

问题描述 [问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚] 在支付宝中加载列表页时，页面非常卡顿，标签页中切换标签要卡好久，滚动触底加载也会卡顿

支付宝官方建议使用$spliceData来进行列表数据的更新

复现步骤 [复现问题的步骤] demo地址 https://github.com/qiuziz/taro-alipay-test-demo.git

git clone https://github.com/qiuziz/taro-alipay-test-demo.git
yarn
yarn dev:alipay

期望行为 [这里请用简洁清晰的语言描述你期望的行为] 期望与微信小程序一样不卡顿，或者有其他暂时性的解决方案，公司项目，月底要上线的！！！ 报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: mac os 10.14.4
• Taro 版本 1.3.22
• Node.js 版本 v10.15.1
• 报错平台 alipay

补充信息 [可选] [根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@qiuziz 循环的 item 里不要有自定义组件，列表里的 AtIcon 去掉，会不会好一点。

[qiuziz]

@Chen-jj 按照你之前说的 是完全ok的，目前看下来就是我用了AtTabs和AtTabsPane就会很卡 且我用支付宝官方UI组件mini-antui中的tabs组件也是同样的问题，感觉是支付宝小程序自身的问题，已跟支付宝官方人员反馈，目前还没有消息:D

[qiuziz]

反馈下这个问题，通过与官方技术支持沟通，以及debug diff过程，发现在更新列表数组时，taro自身是优化了setData（但是diff了很多次，循环体有很多样式计算，而taro是将样式计算转换成data中的变量的），只传递了新增的数据，但是从接口响应后（接口响应很快）到页面渲染完成，开始的时候是三百多ms，到最后请求了十几页数据 每页十条，页面渲染需要接近一秒，卡顿明显

最后直接是用将列表页抽成原生组件写法，页面渲染完全正常，问题应该是在taro上，希望官方能关注下这个问题

最后支付宝官方建议是将列表页这类循环生成的封成自定义组件，在页面通知组件进行$spliceData更新

[WirelessSprucetec]

@qiuziz 循环的 item 里不要有自定义组件，列表里的 AtIcon 去掉，会不会好一点。

我也遇到这个问题了，可是如果循环的item不用自定义组件的话，岂不是我们taro2升级taro3要付出很大的代价，并且组件代码都堆一个文件里，维护成本很高

[qiuziz]

@qiuziz 循环的 item 里不要有自定义组件，列表里的 AtIcon 去掉，会不会好一点。

我也遇到这个问题了，可是如果循环的item不用自定义组件的话，岂不是我们taro2升级taro3要付出很大的代价，并且组件代码都堆一个文件里，维护成本很高

还是自定义组件啊 只不过这里是用支付宝原生的写法而已，这个问题 后面没关注了，现在还有这个问题吗 天了噜