Vue性能优化技巧

Posted 2021-09-03 star

函数组件

由于组件的生命周期处理在框架层面上十分耗时，所以，建议平常尽量使用函数型组件。这样，可以避免不必要的性能损失。只要在模板上声明functional属性，就可以实现函数式组件了：

<template functional>
    <div>
        <div v-if="value" class="on"></div>
        <section v-else class="off"></section>
    </div>
</template>

<script>
    export default {
        props: [\'value\']
    }
</script>

局部变量

平常在引用computed数据进行计算的时候，可以多使用局部变量，这样可以避免多次重复计算。

<template>
  <div :style="{ opacity: start / 300 }">{{ result }}</div>
</template>

<script>
export default {
  props: [\'start\'],
  computed: {
    base () {
      return 42
    },
    result () {
      // 赋值给局部变量，防止重复计算
      const base = this.base;
      let result = start
      for (let i = 0; i < 1000; i++) {
        result += Math.sqrt(Math.cos(Math.sin(base))) + base * base + base + base * 2 + base * 3
      }
      return result
    },
  },
}
</script>

活用v-show,减少v-if

对于需要频繁切换的视图来说，使用v-show比v-if更加节约性能。因为v-show可以避免dom节点的销毁和重建

活用延迟加载（defer)

<template>
  <div class="deferred-on">
    <VueIcon icon="fitness_center" class="gigantic"/>

    <h2>I\'m an heavy page</h2>

    <template v-if="defer(2)">
      <Heavy v-for="n in 8" :key="n"/>
    </template>

    <Heavy v-if="defer(3)" class="super-heavy" :n="9999999"/>
  </div>
</template>

<script>
import Defer from \'@/mixins/Defer\'
export default {
  mixins: [
    Defer(),
  ],
}
</script>

Defer的实现

export default function (count = 10) {
  return {
    data () {
      return {
        displayPriority: 0
      }
    },

    mounted () {
      this.runDisplayPriority()
    },

    methods: {
      runDisplayPriority () {
        const step = () => {
          requestAnimationFrame(() => {
            this.displayPriority++
            if (this.displayPriority < count) {
              step()
            }
          })
        }
        step()
      },

      defer (priority) {
        return this.displayPriority >= priority
      }
    }
  }
}

分批处理(time slicing)

下面这个性能优化的点是前端通用的，可以用requestAnimationFrame分批次执行大数据量的计算,防止一次性执行的数据太大从而阻塞页面渲染。

比如下面这个例子：

fetchItems({ commit }, { items }) {
    commit(\'clearItems\');
    commit(\'addItems\', items)
}

可以改写为：

fetchItems({ commit }, { items, splitCount }) {
    commit(\'clearItems\');
    //新建一个队列
    const queue = new JobQueue();
    splitArray(items, splitCount).forEach(chunk => queue.addJob(done => {
        // 分片
        requestAnimationFrame(() => {
            commit(\'addItems\', chunk);
            done()
        });
    }));
    
    // 等待所有数据处理完毕
    awiat queue.start();
}