前言
一般来说，你不需要太关心vue的运行时性能，它在运行时非常快，但付出的代价是初始化时相对较慢。在最近开发的一个Hybrid APP里，Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms，这让我开始重视vue的初始化性能，并最终优化到200 ~ 300ms，这篇文章分享我的优化思路。
性能瓶颈在哪里？
先看一下常见的vue写法：在html里放一个app组件，app组件里又引用了其他的子组件，形成一棵以app为根节点的组件树。
而正是这种做法引发了性能问题，要初始化一个父组件，必然需要先初始化它的子组件，而子组件又有它自己的子组件。那么要初始化根标签，就需要从底层开始冒泡，将页面所有组件都初始化完。所以我们的页面会在所有组件都初始化完才开始显示。
这个结果显然不是我们要的，更好的结果是页面可以从上到下按顺序流式渲染，这样可能总体时间增长了，但首屏时间缩减，在用户看来，页面打开速度就更快了。
要实现这种渲染模式，我总结了下有3种方式实现。第3种方式是我认为最合适的，也是我在项目中实际使用的优化方法。
第一种：不使用根组件
这种方式非常简单，例如：
抛弃了根组件，从而使A、B、C每一个组件初始化完都立刻展示。但根组件在SPA里是非常必要的，所以这种方式只适用小型页面。
第二种：异步组件
异步组件在官方文档已有说明，使用非常简单：
new Vue({
components: {
A: { },
B (resolve) {
setTimeout(() => {
resolve({ })
}, 0);
}
}
})
这里组件是一个异步组件，会等到手动调用resolve函数时才开始初始化，而父组件也不必等待先初始化完。
我们利用setTimeout(fn, 0)将的初始化放在队列最后，结果就是页面会在初始化完后立刻显示，然后再显示。如果你的页面有几十个组件，那么把非首屏的组件全设成异步组件，页面显示速度会有明显的提升。
你可以封装一个简单的函数来简化这个过程：
function deferLoad (component, time = 0) {
return (resolve) => {
window.setTimeout(() => resolve(component), time)
};
}
new Vue({
components: {
B: deferLoad( ),
// 100ms后渲染
C: deferLoad( , 100 )
}
})
看起来很美好，但这种方式也有问题，考虑下这样的结构:
还是按照上面的异步组件做法，这时候就需要考虑把哪些组件设成异步的了。如果把A、B、C都设成异步的，那结果就是3个
会首先渲染出来，页面渲染的过程在用户看来非常奇怪，并不是预期中的从上到下顺序渲染。</p>
<p><strong>第三种：v-if 和 terminal指令</strong><br />
</p>
<p>这是我推荐的一种做法，简单有效。还是那个结构，我们给要延迟渲染的组件加上v-if：</p>
<pre class="brush:xhtml;">
<B v-if="showB"></B>
<C v-if="showC"></C>
</app>
</pre>
<pre class="brush:js;">
new Vue({
data: {
showB: false,
showC: false
},
created () {
// 显示B
setTimeout(() => {
this.showB = true;
}, 0);
// 显示C
setTimeout(() => {
this.showC = true;
}, 0);
}
});
</pre>
<p>这个示例写起来略显啰嗦，但它已经实现了我们想要的顺序渲染的效果。页面会在A组件初始化完后显示，然后再按顺序渲染其余的组件，整个页面渲染方式看起来是流式的。</p>
<p>有些人可能会担心v-if存在一个编译/卸载过程，会有性能影响。但这里并不需要担心，因为v-if是惰性的，只有当第一次值为true时才会开始初始化。</p>
<p>这种写法看起来很麻烦，如果我们能实现一个类似v-if的组件，然后直接指定多少秒后渲染，那就更好了，例如：</p>
<pre class="brush:xhtml;">
<B v-lazy="0"></B>
<C v-lazy="100"></C>
</app></pre>
<p>一个简单的指令即可，不需要js端任何配合，并且可以用在普通dom上面，Nice！</p>
<p>在vue里，类似v-if和v-for这种是terminal指令，会在指令内部编译组件。如果你想要自己实现一个terminal指令，需要加上terminal: true，例如：</p>
<pre class="brush:js;">
Vue.directive('lazy', {
terminal: true,
bind () {},
update () {},
unbind () {}
});</pre>
<p>这是vue在1.0.19+新增的功能，由于比较冷门，文档也没有特别详细的叙述，最好的方式是参照着v-if和v-for的源码来写。</p>
<p>我已经为此封装了一个terminal指令，你可以直接使用：https://github.com/Coffcer/vu... </p>
<p><strong>其他的优化点</strong><br />
</p>
<p>除了组件上的优化，我们还可以对vue的依赖改造入手。初始化时，vue会对data做getter、setter改造，在现代浏览器里，这个过程实际上挺快的，但仍然有优化空间。</p>
<p>Object.freeze()是ES5新增的API，用来冻结一个对象，禁止对象被修改。vue 1.0.18+以后，不会对已冻结的data做getter、setter转换。</p>
<p>如果你确保某个data不需要跟踪依赖，可以使用Object.freeze将其冻结。但请注意，被冻结的是对象的值，你仍然可以将引用整个替换调。看下面例子：</p>
<pre class="brush:xhtml;">
<p v-for="item in list">{{ item.value }}</p></pre>
<pre class="brush:js;">
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 }
]);
}
})
</pre>
<p><strong>后记</strong><br />
</p>
<p>vue 1.0+ 的组件其实不算轻量，初始化一个组件包括依赖收集、转换等过程，但其实有些是可以放在编译时提前完成的。vue 2.0+ 已经在这方面做了不少的改进：分离了编译时和运行时、提供函数组件等，可以预见，vue 2.0的性能将有很大的提升。</p>
<p>v-lazy-component: https://github.com/Coffcer/vu... <br />
</p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。</p></div>
</div>
<div style="clear: both;"></div>
<div class="author-info fl">
<div><span class="gray">转载请注明：</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div>
<div><span class="gray">本文地址：</span><a href="https://www.mshxw.com/it/85401.html" class="blue">https://www.mshxw.com/it/85401.html</a></div>
</div>
<div class="prev fl">
<p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/85419.html">上一篇 基于JSON数据格式详解</a>
</p>
<p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/85404.html">下一篇 Cpage.js给组件绑定事件的实现代码</a>
</p>
</div>
<div class="new_tag fl">
</div>
</div>
<div class="new_r fr" style="border-radius:10px;">
<div class="tui fl">
<h3>JavaScript相关栏目本月热门文章</h3>
<ul>
<li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解（二）设备树语法详解">【Linux驱动开发】设备树详解（二）设备树语法详解</a></li>
<li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li>
<li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li>
<li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流（ObjectOutputStream和ObjectInputStream）">【Java】对象处理流（ObjectOutputStream和ObjectInputStream）</a></li>
<li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li>
<li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li>
<li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍</a></li>
<li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成</a></li>
<li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li>
<li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li>
<li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li>
<li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li>
<li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目</a></li>
<li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口（包含C uci操作）">在openwrt使用C语言增加ubus接口（包含C uci操作）</a></li>
<li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li>
<li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li>
<li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li>
<li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li>
<li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li>
<li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li>
</ul>
</div>
</div>
</div>
<!-- 公共尾部 -->
<div class="link main">
<div class="link_tit">
<span class="on">热门相关搜索</span>
</div>
<div class="link_tab">
<div class="link_con">
<a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a>
<a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a>
<a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a>
<a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a>
<a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a>
<a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a>
<a href="http://www.mshxw.com/TAG_1/vim.html">vim</a>
<a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a>
<a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a>
<a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a>
<a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a>
<a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a>
<a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a>
<a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a>
<a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a>
<a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a>
<a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a>
<a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a>
<a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a>
<a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a>
<a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a>
<a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a>
<a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a>
<a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a>
</div>
</div>
</div>
<div class="footer">
<div class="dl_con">
<div class="width1200">
<dl>
<dt>学习工具</dt>
<dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd>
<dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd>
<dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd>
<dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd>
</dl>
<dl>
<dt>知识解答</dt>
<dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd>
<dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd>
<dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd>
<dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd>
</dl>
<dl>
<dt>写作必备</dt>
<dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd>
</dl>
<dl class="mr0">
<dt>关于我们</dt>
<dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd>
<dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd>
<dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd>
</dl>
<div class="dl_ewm">
<div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群">
<p>名师互学网交流群</p>
</div>
<div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服">
<p>名师互学网客服</p>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>名师互学网 版权所有 (c)2021-2022 ICP备案号：<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a>
</p>
</div>
</div>
<!-- 手机端 -->
<div class="m_foot_top">
<img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/>
<a href="https://www.mshxw.com/about/index.html">关于我们</a>
<a href="https://www.mshxw.com/archiver/">文章归档</a>
<a href="https://www.mshxw.com/sitemap">网站地图</a>
<a href="https://www.mshxw.com/about/contact.html">联系我们</a>
<p>版权所有 (c)2021-2022 MSHXW.COM</p>
<p>ICP备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p>
</div>
<div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div>
<!--广告!-->
<script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script>
<script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script>
<!--头条搜索!-->
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
<!--头条搜索结束!-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
</div>
<script type="text/javascript">
$(".alert_kf").click(function() {
mantis.requestChat();
});
</script>
<script type="text/javascript">
var mySwiper_weixin = new Swiper('.pc_swiper_weixin', {
autoplay: 3000, //可选选项，自动滑动
loop: true,
speed: 1000,
pagination: '.swiper-pagination',
paginationClickable: true,
})
</script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(".to_top").fadeIn(1000);
} else {
$(".to_top").fadeOut(1000);
}
});
$(".to_top").click(function() {
if ($('html').scrollTop()) {
$('html').animate({
scrollTop: 0
}, 300);
return false;
}
$('body').animate({
scrollTop: 0
}, 300);
return false;
});
});
</script>
</body>
</html>
