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

小程序 About 800 words

场景介绍

小程序使用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

Views: 4,420 · Posted: 2020-02-08

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh