浅谈Vue 初始化性能优化


Posted in Javascript onAugust 31, 2017

前言

一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢。在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路。

性能瓶颈在哪里?

先看一下常见的vue写法:在html里放一个app组件,app组件里又引用了其他的子组件,形成一棵以app为根节点的组件树。

<body>
  <app></app> 
</body>

而正是这种做法引发了性能问题,要初始化一个父组件,必然需要先初始化它的子组件,而子组件又有它自己的子组件。那么要初始化根标签<app>,就需要从底层开始冒泡,将页面所有组件都初始化完。所以我们的页面会在所有组件都初始化完才开始显示。

这个结果显然不是我们要的,更好的结果是页面可以从上到下按顺序流式渲染,这样可能总体时间增长了,但首屏时间缩减,在用户看来,页面打开速度就更快了。

要实现这种渲染模式,我总结了下有3种方式实现。第3种方式是我认为最合适的,也是我在项目中实际使用的优化方法。

第一种:不使用根组件

这种方式非常简单,例如:

<body>
  <A></A>
  <B></B>
  <C></C>
</body>

抛弃了根组件<app>,从而使A、B、C每一个组件初始化完都立刻展示。但根组件在SPA里是非常必要的,所以这种方式只适用小型页面。

第二种:异步组件

异步组件在官方文档已有说明,使用非常简单:

<app>
  <A></A>
  <B></B>
</app>
new Vue({
  components: {
    A: { /*component-config*/ },
    B (resolve) {
      setTimeout(() => {
        resolve({ /*component-config*/ })
      }, 0);
    }
  }
})

这里<B>组件是一个异步组件,会等到手动调用resolve函数时才开始初始化,而父组件<app>也不必等待<B>先初始化完。

我们利用setTimeout(fn, 0)将<B>的初始化放在队列最后,结果就是页面会在<A>初始化完后立刻显示,然后再显示<B>。如果你的页面有几十个组件,那么把非首屏的组件全设成异步组件,页面显示速度会有明显的提升。

你可以封装一个简单的函数来简化这个过程:

function deferLoad (component, time = 0) {
  return (resolve) => {
    window.setTimeout(() => resolve(component), time)
  };
}

new Vue({
  components: {
    B: deferLoad( /*component-config*/ ),
    // 100ms后渲染
    C: deferLoad( /*component-config*/, 100 )
  }
})

看起来很美好,但这种方式也有问题,考虑下这样的结构:

<app>
  <title></title>
  <A></A>
  <title></title>
  <B></B>
  <title></title>
  <C></C>
</app>

还是按照上面的异步组件做法,这时候就需要考虑把哪些组件设成异步的了。如果把A、B、C都设成异步的,那结果就是3个<title>会首先渲染出来,页面渲染的过程在用户看来非常奇怪,并不是预期中的从上到下顺序渲染。

第三种:v-if 和 terminal指令

这是我推荐的一种做法,简单有效。还是那个结构,我们给要延迟渲染的组件加上v-if:

<app>
  <A></A>
  <B v-if="showB"></B>
  <C v-if="showC"></C>
</app>
new Vue({
  data: {
    showB: false,
    showC: false
  },
  created () {
    // 显示B
    setTimeout(() => {
      this.showB = true;
    }, 0);
    // 显示C
    setTimeout(() => {
      this.showC = true;
    }, 0);
  }
});

这个示例写起来略显??拢???丫?迪至宋颐窍胍?乃承蜾秩镜男Ч?R趁婊嵩?组件初始化完后显示,然后再按顺序渲染其余的组件,整个页面渲染方式看起来是流式的。

有些人可能会担心v-if存在一个编译/卸载过程,会有性能影响。但这里并不需要担心,因为v-if是惰性的,只有当第一次值为true时才会开始初始化。

这种写法看起来很麻烦,如果我们能实现一个类似v-if的组件,然后直接指定多少秒后渲染,那就更好了,例如:

<app>
  <A></A>
  <B v-lazy="0"></B>
  <C v-lazy="100"></C>
</app>

一个简单的指令即可,不需要js端任何配合,并且可以用在普通dom上面,Nice!

在vue里,类似v-if和v-for这种是terminal指令,会在指令内部编译组件。如果你想要自己实现一个terminal指令,需要加上terminal: true,例如:

Vue.directive('lazy', {
  terminal: true,
  bind () {},
  update () {},
  unbind () {}
});

这是vue在1.0.19+新增的功能,由于比较冷门,文档也没有特别详细的叙述,最好的方式是参照着v-if和v-for的源码来写。

我已经为此封装了一个terminal指令,你可以直接使用:https://github.com/Coffcer/vu... 

其他的优化点

除了组件上的优化,我们还可以对vue的依赖改造入手。初始化时,vue会对data做getter、setter改造,在现代浏览器里,这个过程实际上挺快的,但仍然有优化空间。

Object.freeze()是ES5新增的API,用来冻结一个对象,禁止对象被修改。vue 1.0.18+以后,不会对已冻结的data做getter、setter转换。

如果你确保某个data不需要跟踪依赖,可以使用Object.freeze将其冻结。但请注意,被冻结的是对象的值,你仍然可以将引用整个替换调。看下面例子:

<p v-for="item in list">{{ item.value }}</p>
new Vue({
  data: {
    // vue不会对list里的object做getter、setter绑定
    list: Object.freeze([
      { value: 1 },
      { value: 2 }
    ])
  },
  created () {
    // 界面不会有响应
    this.list[0].value = 100;

    // 下面两种做法,界面都会响应
    this.list = [
      { value: 100 },
      { value: 200 }
    ];
    this.list = Object.freeze([
      { value: 100 },
      { value: 200 }
    ]);
  }
})

后记

vue 1.0+ 的组件其实不算轻量,初始化一个组件包括依赖收集、转换等过程,但其实有些是可以放在编译时提前完成的。vue 2.0+ 已经在这方面做了不少的改进:分离了编译时和运行时、提供函数组件等,可以预见,vue 2.0的性能将有很大的提升。

v-lazy-component: https://github.com/Coffcer/vu... 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 #Javascript
深入理解vue-router之keep-alive
Aug 31 #Javascript
vue-router 导航钩子的具体使用方法
Aug 31 #Javascript
浅谈express 中间件机制及实现原理
Aug 31 #Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 #Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 #Javascript
Angular2 http jsonp的实例详解
Aug 31 #Javascript
You might like
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
python模块之StringIO使用示例
2015/04/08 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
Python中Class类用法实例分析
2015/11/12 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python配置grpc环境
2019/01/01 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
学前班教师的自我鉴定
2013/12/05 职场文书
中学生个人自我评价
2014/02/06 职场文书
2014村务公开实施方案
2014/02/25 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
人口与计划生育责任书
2015/05/09 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js