小程序mpvue 显示html的坑

最近开发小程序,有一个需求是显示公众号文章的需求,由于页面设计原因不能使用小程序webview来干。

那就需要直接显示html了,开始用v-html 指令测试,发现有一些问题不能处理大量的内联样式,会导致html代码直出。
网上搜了一堆,无论是 wxparse 还是 qs-wxparse 还是 mpvue-wxparse2 ,虽然能很好的显示内容,但是都用一个共同致命的缺点----显示异常卡顿,甚至会导致渲染中断。除非手机配置很高,否则那种体验就糟透了。

而 原生的 v-html 也就是 小程序的 rich-text 组件,显示基本上市秒开,不知道做了什么优化,但是另一个问题是,图片无法自适应屏幕,会撑开很多,为此设置了相关的css样式,谁知病不起作用。最终开始搜了一下,有的兄弟已经踩过的坑了,把返回的html的图片加上内联样式,代码是这样的 。

 this.detail.detailHtml =  this.detail.detailHtml.replace(/\

然后经过测试,速度提升了不知道几倍,反正是秒开。

最后总结:开发小程序应该关注渲染性能,前后端对返回的内容应该有点洁癖,避免太多无用的标签影响到渲染速度,第三方库也要慎重使用。

你可能感兴趣的:(小程序mpvue 显示html的坑)