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

场景介绍

小程序使用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添加了一下功能：

• 代码区域长按复制功能
• 多语言代码高亮
• code标签在普通段落时的样式

相关地址

rich-text: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

Parser: https://github.com/jin-yufeng/Parser