早上在执行小程序时,发现小程序忽然爆炸了,页面加载不出来,以前一直好好的,忽然就爆炸了,不理解,查看日志和原因,让AI去寻找问题。报错如下:
Dom limit exceeded, please check if there's any mistake you've made.(env: Windows,qymp,1.06.2412050; lib: 2.27.3)
用的deepseek进行分析,主要原因出来了:
分析:DOM 节点超限错误
这是微信小程序环境(qymp,基础库 2.27.3)的经典限制问题。微信小程序一个页面的 DOM 节点总数限制为 约 5000 个 (不同基础库版本可能有差异),超过即报 Dom limit exceeded。
主要原因是列表读取的数据异常,一个接口直接爆出了20000人员信息数据;其次是在循环遍历的节点中使用了拖拽、滑动等功能,导致单个模块中出现了节点数量翻倍,本来一个遍历只有N个节点,里面嵌入了太多的功能,节点数量直接变成了3N或者4N,翻了好几倍。
本来数量大,节点又翻了好几倍;在加上平时这个页面一般也就之后30条数据以内的加载,所以整个页面崩了,后面的逻辑也不走了。
根因
微信小程序 DOM 节点限制通常在 5000 个左右 。当 当遍历的数据量多时,加上组件库的 遍历单元中 层层嵌套,很容易超出。
推荐解决方案如下:
- 方案 A:限制列表初始加载数量 + 分页加载。同时排查接口异常的原因。
- 方案 B:修改遍历组件的结构,减少遍历组件内的检点
- 方案 C :使用
<block>和条件渲染减少不必要的容器嵌套