标签：

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

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

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>

关注 onInit 的执行时间

推荐级别：建议

因为长列表数据比较多，所以在应用代码中也需要格外注意，使用 trace 关注 onInit 的执行时间。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。