17个vue的性能优化选项，面试强心剂

jojo的奇妙前端
800 阅读4分钟

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

路由懒加载

版本：Vue Router 2.4.0+
原理：结合 Vue 的异步组件和 Webpack 的代码分割功能，能实现路由懒加载

const route = new VueRouter({
    routes:[{ path: '/home', components:()=> import("@/views/home.vue") }]
})

keep-alive缓存页面

反复重渲染会导致性能问题，这个时候用动态缓存keep-alive进行解决
以下参数让keep-alive更加灵活
include：只希望 xxx 被缓存
exclude：只希望 xxx 不被缓存
max：最多缓存多少组件实例

<!-- 以app.vue为例，失活的组件将会被缓存，可在路由里配置--> 
<template> 
    <div id="app"> 
        <keep-alive> 
            <router-view/> 
        </keep-alive> 
    </div> 
</template>

部分场景把 v-if 改用 v-show 复用dom

当需要频繁切换场景，或不需要重复调用ajax的时候，可以用v-show更佳

v-show：通过css中的display控制显示和隐藏，当display值为none时，隐藏，只编译一次

v-if：是动态的，通过向DOM树添加或删除DOM元素控制显示和隐藏，是个不停的销毁和创建的过程，比较消耗性能

v-for遍历避免同时使用v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响性能
解决1：
在外层套一层div，把v-if放在父级，在子级进行v-for循环
解决2：
如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

长列表性能优化

对不会做改变的数据，就不去添加响应化

应用场景：在data或vuex里我们可以使用freeze冻结对象，对于纯展示的大数据，都可以使用Object.freeze提升性能
注意点：Object.freeze()冻结的是值，你仍然可以将变量的引用替换掉

虚拟滚动

如果是大数据长列表，比如渲染十万条数据，可采用虚拟滚动的方式， 当请求十万条数据这样大请求的时候：

  1. 分段请求，类似懒加载
  2. 通过requestAnimationFrame请求方法
  3. 这个方法是通过document.createDocumentFragment()创建虚拟函数，一次性加入到树里，减少dom的操作次数 （分段请求减少请求数量，虚拟函数减少dom操作次数） （浏览器渲染频率60次每秒，requestAnimationFrame跟它一致，js执行间隔跟浏览器渲染重排吻合，可以优化动画性能）

图片问题：

  1. iconfont，利用css优化，阿里iconfont图标库
  2. 雪碧图
  3. 自动化工具，熊猫站转换，原理是利用量化减少没利用到的颜色格
  4. 转换格式为webp，能减小体积

cdn加速

http1.1最多只能建立6个tcp请求，cdn可以跨越这个限制
cdn可以加速性能的原因在于分布式的网络节点，请求最近的节点

事件的销毁

比如定时器，组件销毁前手动进行清除防止内存泄漏

created(){
    this.timer = setInterval( this.refresh, 2000 )
},
beforeDestroy(){
    clearInterval( this.timer )
}

图片懒加载

  1. 可以减少首页首次加载的数量，优化性能
  2. 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，占位可以不让布局混乱，不至于堆叠在一块，或显示大片空白，让用户体验更好一点

按需引入

第三方插件按需引入，比如element，echarts

函数式组件

无状态的组件可以标记为函数式组件优化性能，函数型组件中，生命周期的耗时处理将不再操作，会作为一个函数进行处理，所以整体页面的效率会提高

适用于：

  1. 只依赖外部数据传递而变化的组件
  2. 组件内部没有任何生命周期函数的要处理 特点：
  3. 没有this（没有实例）
  4. 没有响应式数据
  5. 它只是一个接受一些 prop 的函数
  6. 没有任何生命周
  7. 轻量,渲染性能高，渲染开销底,适合只依赖于外部数据传递而变化的组件(展示组件，无逻辑和状态修改)

分批处理

time slicing 分批处理（用requestAnimationFrame定时器，分批次执行list,防止一次性执行list太大阻塞页面渲染）

子组件拆分

把一些比较重的计算，比如循环处理，把比较重的计算部分封装成一个子组件，拆分到子组件中在里面去实现

局部变量

把计算属性缓存为一个局部的变量，不需要每次使用都调用计算属性，而是一个局部变量，从而提高效率

computed: {
    num() { return 0 },
    result () {
      const num = this.num
    }
}

ssr

与传统 SPA 相比，服务器端渲染 (SSR) 能够具备更好的SEO，能够在更短的时间内去渲染，此ssr优化就能涉及更多的东西了，这里不具体说明，有意者可自行学习

webpack优化

对vue+webpack的项目可以对webpack进行针对性优化

avatar
文章
阅读
粉丝