浅谈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 相关文章推荐
关于js datetime的那点事
Nov 15 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
react+redux仿微信聊天界面
Jun 21 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通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JavaScript 调试器简介
2009/02/21 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
Python实现图片拼接的代码
2018/07/02 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python根据时间获取周数代码实例
2019/09/30 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
幼儿园教师请假制度
2014/01/16 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
高三数学教学反思
2016/02/18 职场文书
担保书怎么写 ?
2019/04/22 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python