浅谈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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 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 a simple smtp class
2007/11/26 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Jquery cookie操作代码
2010/03/14 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
自动化系在校本科生求职信
2013/10/23 职场文书
成人教育自我鉴定
2013/11/01 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
投资合作协议书
2014/04/17 职场文书
学习退步检讨书
2014/09/28 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
交通安全主题班会
2015/08/12 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python