Android Webview中Vue初始化的性能优化

前言

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

性能瓶颈在哪里?

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



    

  1. <body> 
    2. 

  2.     <app></app>  
    3. 

  3. </body>  
    4. 



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


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


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


第一种：不使用根组件


这种方式非常简单，例如：




    

  1. <body> 
    2. 

  2.     <A></A> 
    3. 

  3.     <B></B> 
    4. 

  4.     <C></C> 
    5. 

  5. </body>  
    6. 



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


第二种：异步组件


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




    

  1. <app> 
    2. 

  2.     <A></A> 
    3. 

  3.     <B></B> 
    4. 

  4. </app>  
    5. 





    

  1. new Vue({ 
    2. 

  2.     components: { 
    3. 

  3.         A: { /*component-config*/ }, 
    4. 

  4.         B (resolve) { 
    5. 

  5.             setTimeout(() => { 
    6. 

  6.                 resolve({ /*component-config*/ }) 
    7. 

  7.             }, 0); 
    8. 

  8.         } 
    9. 

  9.     } 
    10. 

  10. })  
    11. 



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


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


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




    

  1. function deferLoad (component, time = 0) { 
    2. 

  2.     return (resolve) => { 
    3. 

  3.         window.setTimeout(() => resolve(component), time) 
    4. 

  4.     }; 
    5. 

  5. } 
    6. 

  6.  
    7. 

  7. new Vue({ 
    8. 

  8.     components: { 
    9. 

  9.         B: deferLoad( /*component-config*/ ), 
    10. 

  10.         // 100ms后渲染 
    11. 

  11.         C: deferLoad( /*component-config*/, 100 ) 
    12. 

  12.     } 
    13. 

  13. }) 
    14. 



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




    

  1. <app> 
    2. 

  2.     <title></title> 
    3. 

  3.     <A></A> 
    4. 

  4.     <title></title> 
    5. 

  5.     <B></B> 
    6. 

  6.     <title></title> 
    7. 

  7.     <C></C> 
    8. 

  8. </app>  
    9. 



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


第三种：v-if 和 terminal指令


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




    

  1. <app> 
    2. 

  2.     <A></A> 
    3. 

  3.     <B v-if="showB"></B> 
    4. 

  4.     <C v-if="showC"></C> 
    5. 

  5. </app>  
    6. 





    

  1. new Vue({ 
    2. 

  2.     data: { 
    3. 

  3.         showB: false, 
    4. 

  4.         showC: false 
    5. 

  5.     }, 
    6. 

  6.     created () { 
    7. 

  7.         // 显示B 
    8. 

  8.         setTimeout(() => { 
    9. 

  9.             this.showB = true; 
    10. 

  10.         }, 0); 
    11. 

  11.         // 显示C 
    12. 

  12.         setTimeout(() => { 
    13. 

  13.             this.showC = true; 
    14. 

  14.         }, 0); 
    15. 

  15.     } 
    16. 

  16. });  
    17. 



这个示例写起来略显啰嗦，但它已经实现了我们想要的顺序渲染的效果。页面会在A组件初始化完后显示，然后再按顺序渲染其余的组件，整个页面渲染方式看起来是流式的。


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


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




    

  1. <app> 
    2. 

  2.     <A></A> 
    3. 

  3.     <B v-lazy="0"></B> 
    4. 

  4.     <C v-lazy="100"></C> 
    5. 

  5. </app>  
    6. 



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


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




    

  1. Vue.directive('lazy', { 
    2. 

  2.     terminal: true, 
    3. 

  3.     bind () {}, 
    4. 

  4.     update () {}, 
    5. 

  5.     unbind () {} 
    6. 

  6. });  
    7. 



这是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将其冻结。但请注意，被冻结的是对象的值，你仍然可以将引用整个替换调。看下面例子：




    

  1. <p v-for="item in list">{{ item.value }}</p>  
    2. 





    

  1. new Vue({ 
    2. 

  2.     data: { 
    3. 

  3.         // vue不会对list里的object做getter、setter绑定 
    4. 

  4.         list: Object.freeze([ 
    5. 

  5.             { value: 1 }, 
    6. 

  6.             { value: 2 } 
    7. 

  7.         ]) 
    8. 

  8.     }, 
    9. 

  9.     created () { 
    10. 

  10.         // 界面不会有响应 
    11. 

  11.         this.list[0].value = 100; 
    12. 

  12.  
    13. 

  13.         // 下面两种做法，界面都会响应 
    14. 

  14.         this.list = [ 
    15. 

  15.             { value: 100 }, 
    16. 

  16.             { value: 200 } 
    17. 

  17.         ]; 
    18. 

  18.         this.list = Object.freeze([ 
    19. 

  19.             { value: 100 }, 
    20. 

  20.             { value: 200 } 
    21. 

  21.         ]); 
    22. 

  22.     } 
    23. 

  23. })  
    24. 



后记


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


作者：Coffce


来源：51CTO
				


				
时间： 2024-08-29 09:42:43

		
		


		


	

	
	

		


		
Android Webview中Vue初始化的性能优化的相关文章


								

		

			

                浏览器-android WebView中进度条只能显示一次，为什么？
			

		

		

									

				问题描述 android WebView中进度条只能显示一次,为什么? public class WebActivity extends Activity implements View.OnClickListener { private WebView webView; private EditText edit_web_adds; private Button btn_webadds_go, btn_web_back; private ProgressBar pb; String Url;			

		

	

				

		

			

                android webview中如何获得输入框输入的内容
			

		

		

									

				问题描述 android webview中如何获得输入框输入的内容 求高手指点,寻求热心好人帮助.如何获得webview中登录框我输入的内容. 详细: 通过webView打开一个URL网址.打开后有一个登录页面,页面有个userID和Password的输入框,和一个登录按钮,输入帐号密码后点击登录按钮,如何获得我输入的帐号和密码????? url是用别公司的登录页面地址.不知道他的数据 解决方案 http://www.eoeandroid.com/forum.php?mod=viewthread			

		

	

				

		

			

                android webview中图片 长按点击保存本地 部分手机不能实现。
			

		

		

									

				问题描述 android webview中图片 长按点击保存本地 部分手机不能实现. 代码如下 private String imgurl = """"; /*** * 功能:长按图片保存到手机 */@Overridepublic void onCreateContextMenu(ContextMenu menu View v ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu v menuInfo)			

		

	

				

		

			

                android webview中注入支持图片双击的js代码无效
			

		

		

									

				问题描述 android webview中注入支持图片双击的js代码无效 javascript:(function(){ var objs = document.getElementsByTagName("img"); for(var i=0;i<objs.length;i++){ objs[i].ondblclick=function(){ window.webtest.openImage(this.src); } } } )() 我在android Webview中注入如上支			

		

	

				

		

			

                Java开发中程序和代码性能优化
			

		

		

									

				现在计算机的处理性能越来越好,加上JDK升级对一些代码的优化,在代码层针对一些细节进行调整可能看不到性能的明显提升,在开发中注意这些,更多的是可以保持一种性能优先的意识. 一 条件控制语句中的优化 1.在循环中应该避免使用复杂的表达式. 在循环中,循环条件会被反复计算,应该避免把一些计算放在循环进行的部分中,程序将会运行的更快.比如: for(int i=0;i<list.size();i++) 可以改为 //我的电脑上,测试数量级在10^7,速度提升一倍. for(int i=0,len=li			

		

	

				

		

			

                浅谈Android开发中ListView控件性能的一些优化方法
			

		

		

									

				ListView优化一直是一个老生常谈的问题,不管是面试还是平常的开发中,ListView永远不会被忽略掉,那么这篇文章我们来看看如何最大化的优化ListView的性能. 1.在adapter中的getView方法中尽量少使用逻辑 2.尽最大可能避免GC 3.滑动的时候不加载图片 4.将ListView的scrollingCache和animateCache设置为false 5.item的布局层级越少越好 6.使用ViewHolder 下面就具体来看一些 1.在adapter中的getView方			

		

	

				

		

			

                Ngnix中的fastcgi参数性能优化和解释
			

		

		

									

				优化性能参数设置,在ngnix.conf中的http 层加上fastcgi参数如下: http { fastcgi_cache_path  /usr/local/nginx/fastcgi_cache levels=1:2 keys_zone=TEST:10m inactive=5m; fastcgi_connect_timeout=300; fastcgi_send_timeout=300; fastcgi_buffer_size=64k; fastcgi_buffers 4 64k; fas			

		

	

				

		

			

                android webview中使用Java调用JavaScript方法并获取返回值
			

		

		

									

				在android平板上用webview打开一个网页,调用里面的javascript方法,同时相互传参. 网上例子很少啊,基本都不能获取返回值,贴一个自己最后调试完的代码如下: Java: 复制代码 代码如下: protected void onCreate(Bundle savedInstanceState) { ........ x = (WebView)this.findViewById(R.id.webView_viewTable); x.setScrollBarStyle(View.SC			

		

	

				

		

			

                android webview 中localStorage无效的解决方法_Android
			

		

		

									

				我在 android里面 使用html5的 localStorage 为什么存不进去也读不出来呀?网上搜了好多都没效果 复制代码 代码如下: mainWebView = (WebView)this.findViewById(R.id.mainWebView);         WebSettings settings = mainWebView.getSettings();         settings.setJavaScriptEnabled(true);         settings