Weex加载流程

最近研究了下weex的源码及启动流程,这里做一个简单的记录。

weex页面渲染流程

下面是weex在Android客户端的加载流程图。

可以看到,weex分为server端和客户端,server端用vue或者rax写好页面后,编译生成bundle.js文件,下发到客户端,客户端根据bundleid,通过weexsdk即可打开启动weex页面。接下来我会详细讲一下其中的流程。

  • 1,当native端调用weexsdk提供的renderPage()方法启动weex时,最终会执行WxBridgeManager的execjs()方法,这个方法是一个c++方法,他会去调用webkit,webkit会执行main.js方法,即启动了js framework,js framework会将我们的bundle.js转换成virtualDom,并以json的格式返回给native端。

  • 2,main.js文件会调用callNative,将我们的virtualDom以Json的格式传给native,jsBridgeManager作为通信桥梁,收到json数据后,会调用我们的WxDom,构建我们的Dom树。

  • 3,当Dom树构建完成后,会通知WxRender去渲染Dom数据

上面三步就是weex加载的主要流程,此时我们对weex有了一个大概的认识,我们知道了客户端执行weex主要weexSdk以及JS Framework组成。

WeexSdk

我先来介绍WeexSdk,WeexSdk主要由WxBridgeManager,WxDomManager,WxRenderManager主要,这三个manager分别负责通信,构建,以及渲染的工作,并且由WxSdkManager统一管理。下面是sdk的UML图。

我们可以看到,sdk提供了WXSDKInstance这个单例类给native做初始化使用。Bridge,Dom,Render都有自己的thread,并且render的线程是主线程。

JS Framework

接下来就是JS Framework的部分了,这一部分的核心就是virtualDom的构建。RN和weex都是用了VirtualDom,VirtualDom就是用js代码生成的dom树,区别于我们用html构建的dom树,那为什么要使用VirtualDom呢?我觉得主要有这几个原因

  • 1,真实的Dom如果要更新数据,需要通过getElementById来更新,如果需要更新的数据多的话,操作会很繁琐,而VirtualDom是基于数据绑定,我们直接更新数据源,VirtualDom便会调用diff算法,自动更新我们需要改变的地方。这一点我们可以通过Android的DataBinding技术来理解,如果我们要更新界面,一般都需要查找控件,通过findviewbyid找到控件后,然后给控件设置新值,但是Android给我提供了DataBinding技术,只需要我们更新数据源,控件里面的数据就会自动更新。VirtualDom和真实的Dom做数据更新也是同样的道理。

  • 2,真实的Dom即使只更新一条数据,也需要调用innerHTML重建整个Dom数,VirtualDom则是通过diff算法更新dom数,这个操作要比innerHTML快很多。

VirtualDom的构建,网上有比较多的开源项目,比如snabbdom,diff算法也是属于virtualDom里面的核心算法,这一块我还没有研究,就不介绍了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注