起因

最近参与了个微信小程序的项目，有个长列表模块 我在自测的时候（测试人员居然没发现，可能懒得加载那么多数据去验证），发现当列表加载加载500条以上的时候，会有一个 Dom limit exceeded, please check if there's any mistake you've made.（超过了Dom限制，请检查你是否犯了任何错误） 渲染报错，页面会白屏，所以猜测小程序的Dom节点应该是有最高限制的。

分析问题原因

网上查了很多资料，查到了Dom节点确实有渲染限制，有位大神还晒出了源码 如下图，限制最高16000个节点

之前只知道 包大小 限制、域名需要配置不然限制、各种授权api限制，没想到 dom节点数量还要限制 居然还有这种骚操作

不过想想也算合理，因为小程序 小程序，小才行，哈哈，资源也不可能无限大，为的就是让你在有限的资源内完成强大的功能。

实验是检验真理的唯一标准

上文图中 代码 左上角显示版本是2019年的，那现在都2023年了，会不会有所改进呢，为了搞清楚现在到底限制多少节点，实验一波。

测试结果如上面两张图 Dom限制数量没变还是 16000个节点，但实际可新增的 渲染节点为 15999个 ，你要是问为啥，那我告诉你，因为小程序默认根标签 page 也占用一个，一个字 牛！！

解决方案

既然找了原因，就要想办法解决，经过一番深思熟虑（面向百度思考），总结了以下几个解决方案。

方案一 人在屋檐下不得不低头

毕竟平台是人家的，规则都是人家定的，那么就得按照规则去开发，下图是官方推荐说明（也是评分标准），单页面节点尽量不超过1000个节点，嵌套不超过30层，子节点不超过60个

动动你灵活嘴皮子，看看能不能说服 产品 说服老板，就这标准 爱做不做，爱谁谁

方案二 就是不服 就是干

长列表 数据过多、dom节点过多 确实有性能问题，但谁让需求是刚需呢，看了下网上的方案 五花八门，有利用swiper 始终只展示固定数量的 swiper-item的 根据当前的 index 显示第几页数据。还有有自己写算法动态显示的。也有很多现成的组件

核心原理 我总结了下就是，只渲染显示在屏幕的数据(为了减少白页面和滑动更丝滑，要再当前屏幕的前后再分别多渲染一屏幕)，实现就是监听 scroll 事件，并且重新计算需要渲染的数据，不需要渲染的数据留一个空的 view 空白占位元素。

具体实现方案就不在这里展开了，留下几个已经实现的链接地址

可以扫码体验下腾讯官方新闻小程序的 渲染效率 感觉很哇塞

小程序长列表组件

文章1

文章2

懒人方案 官方 [Skyline 渲染引擎] list-view

注意点： 列表布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或组件直接子节点

解释下，就是要注意2点

1 scroll-view要设置自定义模式 type="custom"

2 list-view要作为 scroll-view 直接子节点（不然会失去效果）

示例代码如下

    <scroll-view type="custom">
<list-view>

         ...

         循环列表逻辑

         ...
</list-view>
</scroll-view>