Vue的性能优化

2020-05-10 本文已影响0人 hellomyshadow

定位应用的性能问题

Vue应用的性能问题可以分为两个部分：运行时性能问题，加载性能问题。
和其他 web应用一样，定位 Vue应用性能问题最好的工具是 Chrome Devtool(F12 谷歌开发者工具)，通过 Performance 工具可以用来录制一段时间的 CPU 占用、内存占用、FPS 等运行时性能问题，通过 Network 工具可以用来分析加载性能问题。

优化无限列表性能

如果应用中存在非常长或者无限滚动的列表，那么采用 窗口化 的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 DOM 节点的时间。
vue-virtual-scroll-list 和 vue-virtual-scroller 都是解决这类问题的开源项目。还可以参考 Google工程师的文章Complexities of an Infinite Scroller来尝试自己实现一个虚拟的滚动列表来优化性能，主要使用到的技术是 DOM 回收、墓碑元素 和 滚动锚定。

组件懒加载

上面提到的无限列表的场景，比较适合列表内元素非常相似的情况。不过有时候，你的Vue应用的超长列表中的内容往往不尽相同，例如在一个复杂应用的主界面中，由非常多不同的模块组成，而用户看到的往往只有首屏一两个模块。但在初始渲染时，不可见区域的模块也会执行和渲染，从而带来一些额外的性能开销。
使用组件懒加载在不可见时只需要渲染一个骨架屏，不需要真正渲染组件。

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载；

实现思路：
- 组件化
  将各模块拆分为组件粒度，降低耦合度；将组件依赖的资源（比如请求接口、请求相关的依赖资源）全部封装在组件内部进行调用；
- 加载优先级
  优先加载首屏可见模块，其余不可见模块懒加载，待可见或即将可见时加载；
判断可见性问题
通过监听scroll、resize事件来判断模块是否可见，代码不仅繁琐，而且一不小心没有函数去抖就又可能导致严重的性能问题。
H5新增的IntersectionObserver API是一个不错的解决方案，其设计是异步的，回调是在主线程空闲时才执行，而且保证回调执行次数非常有限，在性能方面表现更优，使用起来也更简单。
当然，低版本浏览器还是要通过 polyfill 兼容。
尽可能懒的条件渲染
解决了可见性问题，懒加载就比较简单了，Vue提供的 v-if 可以做到惰性渲染。
如果可见后进行初始渲染，可见前如何显示
如果在判断加载条件为 false 时，什么都不渲染，就会带来一系列问题：
- 用户体验比较差，最开始是白屏，然后突然又渲染出现内容；
- 最致命的是，判断可见性需要一个目标来观察，如果什么不都渲染，那就无从观察。
因此，引入一个骨架屏的概念，为真实的组件创建一个在尺寸、样式上非常接近真实组件的组件。
骨架屏的作用：
- 提升用户感知体验；
- 保证切换的一致性；
- 提供可见性观察的目标对象。

骨架屏

如何提升切换时的体验
在真实组件开始渲染时，需要一定的时间和空间，时间指的是真实组件从创建到渲染的时间，包括请求接口、请求资源和渲染的时间，空间指的是页面布局中需要给真实组件留出刚好的位置，避免产生抖动。
我们可以使用Vue内置的transition组件自定义骨架组件和真实组件的进入和离开效果，通过合理的布局和定位，减少切换时的抖动，通过设置过渡效果给真实组件留出一定的加载时间。
Vue组件懒加载方案 --- Vue Lazy Component
该插件支持组件可见或即将可见时懒加载，支持组件延时加载，支持加载组件前展示组件骨架，提高用户体验，支持懒加载组件分包异步加载。

小技巧及其原理

computed 与 watch
实际上它们都是通过 watcher 实现的，最大区别就是 computed 具有缓存功能。

在创建计算属性时，它会创建一个watcher，其中有两个属性lazy:true, dirty: true。
创建过程默认是不执行的，只有当用户取值时才会判断 dirty:true 则让这个watcher去取值，求值结束后则改为dirty:false，不再重新求值，再次取值直接返回上次求值结果。
那什么时候会重新计算求值呢？
只有当计算属性中依赖的值发生变化时，它会调用对应的update()，更改dirty:true，从而重新执行watcher求值。

v-if 与 v-for 不能一起使用，必要时应使用 computed 先过滤出需要的数组元素。
原因是 v-for 比 v-if 的优先级更高，即使只需要其中一个元素（只有一个元素的v-if="true"），每一次仍然需要遍历整个数组，严重影响性能。
源码编译

// 1. v-if 在父元素上，v-for 在子元素上
VueTemplateCompiler.compile(`<div v-if="true"><span v-for="i in 3">hello</span></div>`);
// 模板的编译结果
with(this) {
    return (true) ? _c('div', _l((3), function (i) {
        return _c('span', [_v("hello")])
    }), 0) : _e() // _e()方法创建一个空的虚拟dom等等。
}
// 2. v-for 与 v-if 连用的编译结果
VueTemplateCompiler.compile(`<div v-if="false" v-for="i in 3">hello</div>`);
with(this) {
    return _l((3), function (i) {
        return (false) ? _c('div', [_v("hello")]) : _e()
    })
}

v-show 的底层实现
v-show编译出来里面没有任何东西，只有一个directives，它里面有一个指令叫做v-show
源码编译

VueTemplateCompiler.compile(`<div v-show="true"></div>`);
with(this) {
    return _c('div', {
        directives: [{
            name: "show",
            rawName: "v-show",
            value: (true),
            expression: "true"
        }]
    })
}

只有在运行的时候它会去处理这个指令，它正是在操作DOM的 display 属性

// v-show 操作的是样式  定义在platforms/web/runtime/directives/show.js
bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
    vnode = locateNode(vnode)
    const transition = vnode.data && vnode.data.transition
    const originalDisplay = el.__vOriginalDisplay =
      el.style.display === 'none' ? '' : el.style.display
    if (value && transition) {
      vnode.data.show = true
      enter(vnode, () => {
        el.style.display = originalDisplay
      })
    } else {
      el.style.display = value ? originalDisplay : 'none'
    }
}

Object.freeze
Object.freeze()：把不会修改的对象/数组冷冻起来，Vue将不会对这些数据做响应式处理。当然，擅自修改这些数据也将会报错给你看。
```
const columnList = Object.freeze([
    { title: '姓名', key: 'name', align: 'center' },
    { title: '性别', key: 'gender', align: 'center' }
])
```

Vue的性能优化

定位应用的性能问题

优化无限列表性能

组件懒加载

小技巧及其原理

猜你喜欢

热点阅读