长列表优化

更新时间：2024-09-01 11:23:13

本节会系统的介绍长列表的性能优化方法。

当列表长度超长时，必定会影响页面的性能，下面的一系列措施会让您的长列表渲染和更新更加快速。

for 指令中不使用表达式

表达式会频繁触发不必要的 js 引擎执行，长列表千万不要使用表达式，全部都要改写成属性读取。

推荐级别：强烈

反例

<div for="{{list}}">
  <text show="{{$item.num > 10}}">{{$item.num}}</text>
</div>

复制代码

正例

<div for="{{list}}">
  <text show="{{$item.showNum}}">{{$item.num}}</text>
</div>
<script>
  export default {
    onInit() {
      for (let item of this.list) {
        if (item.num > 10) {
          item.showNum = true
        } else {
          item.showNum = false
        }
      }
    },
  }
</script>

复制代码

for 指令中不使用自定义组件

推荐级别：强烈

自定义组件中会创建 vm，频繁而密集的 vm 创建对性能和内存都是很大的压力。

for 指令中只使用 item 的数据

推荐级别：强烈

在 for 中不使用不属于列表本身的数据，否则会产生不必须的数据响应。

反例

<div for="{{list}}">
  <text class="{{$item.num > count ? 'red' : 'blue'}}">{{$item.num}}</text>
</div>
<script>
  export default {
    data: {
      count: 10,
    },
  }
</script>

复制代码

正例

<div for="{{list}}">
  <text class="{{$item.className}}">{{$item.num}}</text>
</div>

复制代码

分段懒加载

推荐级别：强烈

注意：下例子仅做懒加载方式参考，实际上还要加上其他优化方法。

正例

<template>
  <div>
    <div for="{{list}}">
      <text>{{$item}}</text>
    </div>
  </div>
</template>
<script>
  const listData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  export default {
    data: {
      list: [],
    },
    onInit() {
      this.list = listData.slice(0, 6)
    },
    onShow() {
      this.list = listData
    },
  }
</script>