记一次小程序排查 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添加了一下功能：
- 代码区域长按复制功能
- 多语言代码高亮
code标签在普通段落时的样式
相关地址
rich-text: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
阅读 1466 · 发布于 2020-02-08
———— END ————
扫描下方二维码关注公众号和小程序↓↓↓
昵称：