长列表优化

更新时间：2024-10-12 10:51:00

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

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

for 指令中不使用表达式

表达式会频繁触发 js 引擎执行，长列表中的表达式，可以改写成属性读取。

推荐级别：强烈

反例

<template>
  <div>
    <div for="{{foodList}}">
      <text>{{$item.vegetarian ? 'Vegetarian' : 'Non-Vegetarian'}}</text>
      <text>{{$item.name}}</text>
      <text>{{$item.category}}</text>
    </div>
  </div>
</template>
<script>
  export default {
    data: {
      foodList: [
        { name: 'Apple', category: 'Fruit', vegetarian: true },
        { name: 'Chicken', category: 'Meat', vegetarian: false },
        { name: 'Broccoli', category: 'Vegetable', vegetarian: true },
        { name: 'Pizza', category: 'Fast Food', vegetarian: false },
        { name: 'Yogurt', category: 'Dairy', vegetarian: true },
      ],
    },
  }
</script>

复制代码

正例

<template>
  <div>
    <div for="{{foodList}}">
      <text>{{$item.vegetarianStatus}}</text>
      <text>{{$item.name}}</text>
      <text>{{$item.category}}</text>
    </div>
  </div>
</template>
<script>
  export default {
    data: {
      foodList: [
        { name: 'Apple', category: 'Fruit', vegetarianStatus: 'Vegetarian' },
        { name: 'Chicken', category: 'Meat', vegetarianStatus: 'Non-Vegetarian' },
        { name: 'Broccoli', category: 'Vegetable', vegetarianStatus: 'Vegetarian' },
        { name: 'Pizza', category: 'Fast Food', vegetarianStatus: 'Non-Vegetarian' },
        { name: 'Yogurt', category: 'Dairy', vegetarianStatus: 'Vegetarian' },
      ],
    },
  }
</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>