页面节点过多卡死问题
发布于 7 年前 作者 xiuying06 13010 次浏览 最后一次编辑是 6 年前 来自 问答

我有一个选择城市地标的页面，有不同分类：行政区，机场车站，地铁站，景点，高效，医院

每个分类下面有小的分类：譬如行政区下面有两级目录，地铁站有两级目录。

总结一下：就是页面数据很多，渲染的节点也很多。

在微信上运行，每个分类切换的时候，每次切换重新渲染的节点很多，页面渲染出来的速度超级卡，特别是ios，页面直接白屏或者卡死。

之前的微信版本提示过页面节点过多的问题。

个人推测是数据模板渲染和虚拟dom的锅，但是不知道实际实现上的限制是什么，我好绕开这个坑。

盼复！

5 回复

调试控制台有信息输出，提示dom节点超过上限。android 并无问题

我现在也是这个问题 请问解决了吗

N + M + L

N = 9

M [3, 60)

L [3, 250)

外层包裹节点 < 10

每次点击父节点，重新设置下一级节点的数据。事件响应很快，但是渲染结果很慢或者直接卡主。

<view class="position">
  <view class="main flex" wx:if="{{groups}}">
 
    <!-- 第一列 -->
    <view class="section-item section-fixwidth section-first">
      <scroll-view scroll-y="true" style="height:100%" class="section-warp">
        <view wx:for="{{groups}}" wx:for-item="item" wx:key="{{index}}"
          data-label="{{ item.label }}"
          data-level="firstColumn"
          class="cell elipsis {{ item.tmpActive ? 'active' : '' }}"
          catchtap="clickColumn"
          >{{ item.label }}</view>
      </scroll-view>
    </view>
 
    <!-- 中间列 -->
    <view class="section-item section-fixwidth section-second" wx:if="{{thirdColumn}}">
      <scroll-view scroll-y="true" style="height:100%" class="section-warp">
        <view wx:for="{{firstColumn.value}}" wx:for-item="item" wx:key="{{index}}"
          data-label="{{ item.label }}"
          data-level="secondColumn"
          class="cell elipsis {{ item.tmpActive ? 'active' : '' }}"
          catchtap="clickColumn"
          >{{ item.label }}</view>
      </scroll-view>
    </view>
 
    <!-- 倒数第一列 -->
    <view class="section-item section-third flex-item" wx:if="{{thirdColumn}}" id="{{secondColumn.label}}">
      <scroll-view scroll-y="true" style="height:100%" class="section-warp">
        <view wx:for="{{secondColumn.value}}" wx:for-item="item" wx:key="{{index}}"
          data-label="{{ item.label }}"
          data-level="thirdColumn"
          class="cell elipsis {{ item.tmpActive ? 'active' : '' }}"
          catchtap="clickColumn"
          >{{ item.label }}</view>
      </scroll-view>
    </view>
  </view>
</view>
import api from 'api.js';
 
Page({
  data: {
    cityId: '',
    groups: null,
    allMap: null,
    firstColumn: null,
    secondColumn: null,
    thirdColumn: null,
    position: null
  },
 
  onLoad (options) {
    me.setData({
      cityId,
      allMap: data.allMap,
      groups: data.groups,
      firstColumn: data.firstColumn,
      secondColumn: data.secondColumn,
      thirdColumn: data.thirdColumn
    });
  },
 
  clickColumn (evt) {
    let {
      label, level
    } = evt.currentTarget.dataset;
 
    let {
      coll, allMap, groups, firstColumn, secondColumn, thirdColumn
    } = this.data;
 
    if (level === 'firstColumn') {
      firstColumn = allMap[label];
      secondColumn = api.filterColumn(firstColumn.value);
      thirdColumn = api.filterColumn(secondColumn.value);
    }
    else if (level === 'secondColumn') {
      secondColumn = api.filterColumn(firstColumn.value, label);
      thirdColumn = api.filterColumn(secondColumn.value);
    }
    else if (level == 'thirdColumn') {
      thirdColumn = api.filterColumn(secondColumn.value, label);
    }
 
    this.setData({
      allMap,
      groups,
      firstColumn,
      secondColumn,
      thirdColumn,
    });
  },
 
  // 记录当前位置：城市，一级，二级，三级
  selectPosition (item, level) {
  }
});

我也出现这个超限错误，但我是ios能显示，android 不行

你好，请问大概有多少个节点呢？

这几级类目是 N*M*L 的节点还是 N+M+L 的节点数？

回到顶部