大概昨天晚上10点多,陆续接到用户报告说我们小程序出现页面崩溃情况。具体情况是:
在我们小程序某个页面里使用了 scroll-view 来展示列表内容,上划时会加载更多数据。此前一直正常运行,昨晚起突然出现上划几次后就导致页面变空白的情形。
紧急启用调试后发现出现 Dom limit exceeded, please check if there's any mistake you've made.的报错,并包括下列报错:
Framework inner error (expect START descriptor with depth 2 but get FLOW_DEPTH)
Error: Framework inner error (expect START descriptor with depth 2 but get FLOW_DEPTH)
at Vo.expectStart (https://servicewechat.com/lib/WAWebview.js:1:2734898)
at br (https://servicewechat.com/lib/WAWebview.js:1:2692992)
at https://servicewechat.com/lib/WAWebview.js:1:2692911
at https://servicewechat.com/lib/WAWebview.js:1:2692863
at Vo.wr [as _startCb] (https://servicewechat.com/lib/WAWebview.js:1:2692904)
at Vo.nextStep (https://servicewechat.com/lib/WAWebview.js:1:2734497)
at Tr.e.initiator (https://servicewechat.com/lib/WAWebview.js:1:2702629)
at a.safeCallback (https://servicewechat.com/lib/WAWebview.js:1:462709)
at v._advancedCreate (https://servicewechat.com/lib/WAWebview.js:1:516521)
at d.createComponent (https://servicewechat.com/lib/WAWebview.js:1:528706)
起初我们以为是近期添加的 scroll-view 滚动时同时滚动页面的功能导致的,但随后发现另一个页面也有 scroll-view 的小程序也出现了滚动崩溃情况。该小程序相关页面没有变更很久了,以前也一直运行正常。
暂时没有发现其他页面有这个问题。例如有个页面没有使用 scroll-view 直接使用普通的 view 来呈现列表内容,一样的触底加载更多数据,无论滚多少屏也不会导致页面崩溃。但唯独 scroll-view 的滚动几下就导致页面崩溃了。
以上故障,iOS 和安卓微信均有出现。
已处理,重新发版生效
dom数据太多了,应该优化一下结构
感谢大家的回复!
截至目前问题已经解决了,不知道官方是否做了什么调整(我看上面有官方回复),反正我们自己先紧急做了页面模块组件化来规避 dom 超量问题。
其实我们数据量不算大,远未达到限制门槛。不过这个临时事件也让我们对小程序的性能优化有了新的认知,昨天也顺带研究了不少东西,现分享如下:
要规避 Dom limit exceeded 问题,
首先就是可以对页面模块进行组件化——原先一个模块可能有很多个 Dom 节点,但做成组件后就只算 1 个。
其次,可以对列表渲染进行进一步优化。目前我们了解到的方案主要有小程序官方出品的 recycle-view 回收视图以及 observe list 观察列表和 virtual list 虚拟列表。这三个方案各有优劣,性能最强的应当是官方出品的,其次是虚拟列表,最后是观察列表——但是比起普通列表还是强太多了。有兴趣的朋友可以去深入研究一下,这里不作展开。
回顾本次事件,我们感觉是小程序底层做了什么调整导致的。不然不会导致我们不同的小程序同时出现类似问题。因为我们前后端在那个时段都没有调整,业务量也没有明显变化。问题突然就出现了。好在问题解决了,也学到了新知识。塞翁失马,焉知非福吧。
我们也是遇到了 感觉是微信最近改动了 你这边解决了吗
只渲染可见区域的 DOM 节点,其他区域的节点数据清空只保留高度,可参考一下这个:
https://developers.weixin.qq.com/s/oeXuo7mY7haZ
分页加载的数据量有多少