小程序富文本内容渲染缓慢处理方案

在做电商小程序的时候我们经常会遇到商品详情页面，商品描述富文本内容为一些大图、长图，加载起来异常缓慢的问题。

刚开始我们也是用的npm安装组件包：

npm install mp-html

在需要使用页面的 wxml 文件中添加

<mp-html content="{{html}}" />

 

这种方式可以正常加载出富文本内容，但遇到长图大图时加载就会特别慢，而且这种方式会等到所有内容全部加载完成之后才显示。

 

通过查看uniapp文档发现，其内置组件提供了 rich-text 能够友好的支持富文本内容的渲染，渲染速度有了质的提升，不管是长图还是大图，都是通过懒加载的方式逐步渲染，代码如下：

<rich-text :nodes="goods.detailInformation"></rich-text>