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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yang450712123/article/details/84097580

富文本解析 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 还行，如果数据量过大，慎用！！！