富文本解析 wxParse 解析数据造成页面假死

问题描述

小程序中总有富文本解析的场景,比如:头条的终端页。我们的终端页使用了 wxParse, 但是由于 wxParse有些小问题,并且项目使用 mpvue,所以把
wxParse 拉到本地做了一些魔改,但是依然遇到性能瓶颈,数据过多造成页面假死,相对于小程序原生的 rich-text 富文本解析组件;wxparse 的功能性更丰富,支持 video;

解决方案

由于数据过多而造成页面假死,那就从数据层的角度考虑,把数据分段加载,关键部分代码如下:

<template>
  <!--基础元素-->
  <div class="wxParse" :class="className" v-if="!loading">
    <block v-for="(node,index) of nodes" :key="index">
      <wxParseTemplate :node="node"/>
    </block>
  </div>
</template>

<script>
let query = null;
let scrollTime = null;
let nodesData = [];
export default {
    data() {
      return {
        nodes:[], // 计算属性中的 nodes 放到 data 里
      };
    },
    onPageScroll(e){
      if (!nodesData.length) return;
      if (scrollTime) clearTimeout(scrollTime);
      scrollTime = setTimeout( ()=> {
        query.exec((res) => {
          clearTimeout(scrollTime);
          console.log('res');
          console.log(res);
          console.log(e);
          if (e.scrollTop > (res[0].height/2)) {
            console.log('我要加载');
            this.nodes.push(...nodesData.splice(0,15));
          }
        })
      },100);
    },
    onLoad() {
      nodesData = [];
      console.log('wxParse start');
      query = wx.createSelectorQuery();
      query.select('.wxParse').boundingClientRect();
      nodesData = this.getNodes();
      this.nodes.push(...nodesData.splice(0,25));
    },
    onUnload () {
      nodesData = [];
      if (scrollTime) clearTimeout(scrollTime);
    },
    methods: {
      getNodes () {
        const {
          content,
          noData,
          imageProp,
          startHandler,
          endHandler,
          charsHandler,
        } = this;
        const parseData = content || noData;
        const customHandler = {
          start: startHandler,
          end: endHandler,
          chars: charsHandler,
        };
        const results = HtmlToJson(parseData, customHandler, imageProp, this);
        this.imageUrls = results.imageUrls;
        return results.nodes;
      },
    },
}
</script>

上面方法的思路是在页面滑动的时候对数据进行分段加载,但是通过实践,发现如果终端页要跳转其他页面,返回之后还是会把剩余数据加载完,依旧造成页面卡死,还有问题就是刚进入页面解析数据,比如有贴底按钮无法点击(此时在解析数据)。最终还是重新自写了个 parse,如果对于需求比较简单的,推荐小程序原生的
rich-text,如果数据较少, wxParse 还行,如果数据量过大,慎用!!!

Logo

前往低代码交流专区

更多推荐