记一次小程序排查setData函数耗时很长思路

小程序大约 800 字

场景介绍

小程序使用wxParse渲染富文本，原理是将HTML标签解析成为原生view+wxParse-样式。

功能上了生产环境后发现，数据从网络上请求下来后，setData函数更新数据时，耗时达到了3秒之多，加载进度条消失了页面还未展示出来，体验较差。

查看官方文档，setData每次设置的数据大小不能超过1MB，应避免一次设置过多数据。

但发现文章数据也没有达到1MB大小，故排除了大小限制问题。

后来在查看页面布局时发现，生成了很多view，对比较短的文章发现，节点越少，setData耗时越短。

想到view的多少由wxParse解析HTML节点生成，没有办法控制（小编功力不够，还没能力修改），只能想到使用原生rich-text试一下耗时多久。

不试不知道，果然是因为wxParse渲染后节点过多导致setData函数非常耗时。

查看rich-text的官方文档描述后，感觉要破罐子破摔了。

tip: nodes不推荐使用String类型，性能会有所下降。
tip: rich-text组件内屏蔽所有节点的事件。

使用String性能下降，事件又被全部屏蔽。

OMG! 还能不能快乐地玩耍了。

作为CV工程师百度了一把（不对谷歌了一把），发现有一个Parser开源的解决方案，替换后果然耗时短了很多，平均只要200-300毫秒。

小编的小程序基于Parser添加了一下功能：