vue前端性能优化（2）

青烟小生
410 阅读4分钟

我正在参加「掘金·启航计划」

Vue.js 是一款优秀的前端框架，使用它可以快速地构建出高性能、可维护的单页应用程序。然而，在应对复杂的业务逻辑和海量的数据时，我们需要进行前端性能优化来提升用户体验。本文将介绍一些 Vue.js 的前端性能优化方法，包括但不限于：

  1. 使用 v-if 替代 v-show

在 Vue.js 中，通过 v-if 和 v-show 指令可以控制元素是否显示或隐藏。其中，v-show 只是简单地改变了元素的 display 属性，因此会在 DOM 中保留这个元素，而 v-if 则会根据条件动态添加或删除 DOM 元素。因此，在元素频繁切换时，建议使用 v-if 替代 v-show，减少 DOM 节点的数量。

<!-- 不要这样写 -->
<div v-show="isVisible">Hello World</div>

<!-- 改为这样写 -->
<div v-if="isVisible">Hello World</div>
  1. 给 v-for 设置 key

在使用 v-for 渲染列表时，Vue.js 会依靠每个元素的索引值来比对更新 DOM，因此在修改数组时，必须确保每个元素的键（key）是唯一的。否则，Vue.js 会无法正确定位到更新的 DOM 元素，从而影响性能。

<ul>
  <li v-for="(item, index) in items" :key="item.id">{{ item.text }}</li>
</ul>
  1. 使用计算属性（computed）或缓存数据

当需要对某个数据进行复杂的处理时，可以将这个操作放在 computed 中处理，而不是直接写在模板里或者方法中。因为模板会在每次渲染时都重新执行一次，而 computed 会有缓存机制，只有在相关的依赖发生改变时才会重新运算。

<div>{{ fullName }}</div>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      // 这里的计算会被缓存
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

如果有些数据需要频繁地调用，但是又比较耗时，可以使用 Memoization 的技巧来缓存数据，避免重复计算。

// 将计算结果缓存起来，下一次调用时
const memoize = (fn) => {
    const cache = new Map()  
    return (...args) => {
        const key = args.join(',')
        if (cache.has(key)) {
            console.log('return cached result')
            return cache.get(key)
        } else {
            const result = fn(...args)
            cache.set(key, result)
            return result
        }
    }
}

const add = (a, b) => {
    console.log('hard work!')
    return a + b
}

const memoizedAdd = memoize(add)

memoizedAdd(1, 2) // hard work!
memoizedAdd(1, 2) // return cached result
  1. 避免频繁修改响应式数据

在 Vue.js 中，所有的响应式数据都是通过 Object.defineProperty 或者 Proxy 来实现的。因此，在修改响应式数据时，会触发视图的重新渲染和相关依赖的更新。因此，为了提高性能，我们应该尽量避免频繁地修改响应式数据。

<!-- 不要这样写 -->
data() {
  return {
    userInfo: {
      name: 'John',
      age: 20,
      gender: 'male'
    }
  };
},
methods: {
  updateUserInfo() {
    this.userInfo.name = 'Jane';
    this.userInfo.age = 21;
    this.userInfo.gender = 'female';
  }
}

<!-- 改为这样写 -->
data() {
  return {
    name: 'John',
    age: 20,
    gender: 'male'
  };
},
methods: {
  updateUserInfo() {
    this.name = 'Jane';
    this.age = 21;
    this.gender = 'female';
  }
}

如果确实需要频繁修改响应式数据，可以考虑使用 $set 方法来代替直接修改对象属性的方式。例如：

this.$set(this.userInfo, 'name', 'Jane');
  1. 使用异步组件（async component）

在 Vue.js 中，可以通过异步组件来延迟加载一些不必要首次渲染的组件，以加快页面加载速度。

// 异步加载组件
Vue.component('my-component', () => import('./MyComponent.vue'));
  1. 处理图片资源

处理图片资源也是一种重要的前端性能优化方法。具体方法包括：

  • 将图片压缩到合适的大小；
  • 将图片转成 WebP 格式以提高加载速度；
  • 使用懒加载技术来节省带宽和减少请求次数；
  • 通过 CDN 加速图片的加载速度；
  • …

例如，使用 vue-lazyload 插件可以实现图片懒加载功能：

<img v-lazy="image.src" alt="{{ image.alt }}">
  1. 充分利用 Keep-Alive

在 Vue.js 中，可以使用 keep-alive 组件来缓存已经渲染过的组件，以避免组件的多次渲染造成性能问题。

<keep-alive>
  <router-view></router-view>
</keep-alive>
  1. 合理使用 computed 和 watch

computed 和 watch 都是 Vue.js 中用于处理数据监听的机制。但是，在实际项目中，我们需要注意以下几点：

  • 只有需要响应式变化的数据才需要放在 data 中定义；
  • 计算属性（computed）只考虑依赖关系，不做任何改变；
  • 监听器（watch）主要监听具体的改变；
  • 如果计算属性中使用了耗时的操作，可以考虑将它拆分成多个计算属性或者方法。
  1. 代码优化

除了上述性能优化技巧之外，我们还需要注意代码质量和可读性，避免冗余代码、多余操作等问题。例如：

  • 避免在模板中使用复杂的表达式；
  • 避免在组件中使用过多的逻辑；
  • 避免不必要的 DOM 操作；
  • 避免在循环中使用计算属性；
  • 避免使用 inline-style 等内联样式。

总结

本文介绍了一些常用的 Vue.js 前端性能优化方法，在实际项目中，我们需要根据具体情况综合利用这些技巧，以提升整个应用程序的性能和用户体验。需要注意的是，尽可能避免触发组件的重新渲染和相关依赖的更新，减少DOM节点的数量，优化图片资源等也是非常重要的。

希望以上内容对您有所帮助。

avatar
文章
阅读
粉丝