前端性能优化(三) vue性能优化九法

前言

在VueConf US 大会上 Vue开发核心团队成员 Guillaume Chau 发表了一个名为Vue性能优化9法的主题。

演讲视频:http://www.youtube.com/watch?v=5B66qer8cZo

演讲文稿:https://slides.com/akryum/vueconfus-2019#/

演示网站:https://vue-9-perf-secrets.netlify.com

演示代码:https://github.com/Akryum/vue-9-perf-secrets

优化九法

  1. 函数型组件
  2. 子组件拆分
  3. 局部变量
  4. 活用v-show,减少v-if
  5. 使用keep-alive
  6. 活用延迟装载(Defer)
  7. 分批处理(Time slicing)
  8. 非响应模式
  9. 仅渲染可视化部分

1.函数型组件

函数型组件中,生命周期的耗时处理将不再操作,会作为一个函数进行处理,所以整体页面的效率会提高。适用于只依赖外部数据传递而变化的组件,组件内部没有任何生命周期函数的要处理。
优化前:

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

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

优化后:

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

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

关键实现:在template标签中加上functional属性 <template functional>

2.子组件拆分

把一些比较重的计算,比如循环处理,拆分到子组件中去实现。
优化前:

<template>
  <div :style="{
       opacity: number / 300 }">
    <div>{
  { heavy() }}</div>
  </div>
</template>

<script>
export default {
    
  props: ['number'],
  methods: {
    
    heavy () {
     /* HEAVY TASK */ }
  }
}
</script>

优化后:

<template>
  <div :style="{
      
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值