Weex的基本原理和工作流程
Weex运行流程
-
通过transformer 工具把vue代码转成纯 JavaScript 代码，即jsbundle
-
在客户端运行一个 JavaScript 引擎，来执行jsBundle
-
在客户端通过JS Bridge，完成Native 代码可以和 JavaScript 引擎相互通信
WeexSDK主要分为3个部分：JS Bridge、Render、Dom，分别对应
WXBridgeManager、WXRenderManager、WXDomManager 。通过WXSDKManager统一管理。其中JS Bridge和Dom运行在独立的HandlerThread中，而Render运行在UI线程。JS Bridge主要用来和 JS 端实现进行双向通信，比如把js端的dom结构传递给Dom线程。Dom主要是用于负责dom的解析、映射、添加等等的操作，最后通知UI线程更新。而Render负责在UI线程中对dom实现渲染。
客户端 JavaScript 引擎
Weex 的 iOS 和 Android 客户端中都会运行一个 JavaScript 引擎，来执行 JS bundle，同时向各端的渲染层发送规范化的指令，调度客户端的渲染和其它各种能力。我们在 iOS 下选择了 JavaScriptCore 内核，而在 Android 下选择了谷歌提供的 v8 内核。
JS bundle 公用一个 JavaScript 内核实例，同时对每个 JS bundle 在运行时进行了上下文的隔离，使得每个 JS bundle 都能够高效安全的工作。
客户端渲染层
Weex 目前提供了 iOS 和 Android 两个客户端的 native 渲染层。每个端都基于 DOM 模型设计并实现了标准的界面渲染接口供 JavaScript 引擎调用。并且结合 web 标准和 native 的特点和优势实现了一套统一的组件和模块。
渲染流程
Weex 渲染流程
-
虚拟DOM.
-
构造树结构. 分析虚拟DOM JSON数据以构造渲染树(RT).
-
添加样式. 为渲染树的各个节点添加样式.
-
创建视图. 为渲染树各个节点创建Native视图.
-
绑定事件. 为Native视图绑定事件.
-
CSS布局. 使用
css-layout来计算各个视图的布局. -
更新视窗(Frame). 采用上一步的计算结果来更新视窗中各个视图的最终布局位置.
-
最终页面呈现.
在1-3步骤中，在实例创建完成后，接下来就是执行
JS bundle了。JS bundle的结果是生成Virtual DOM ，然后去patch 新旧 Vnode 树，根据diff算法找出最佳的DOM操作。这个过程通过weex-vue-framework完成，唯一和浏览器不同的是，调用的是 Native app api ，而不是浏览器里面对DOM节点增删改查的操作
Weex 环境中没有 DOM
DOM（Document Object Model），即文档对象模型，是 HTML 和 XML 文档的编程接口，是 Web 中的概念。Weex 的运行环境以原生应用为主，在 Android 和 iOS 环境中渲染出来的是原生的组件，不是 DOM Element。
不支持 DOM 操作
既然原生环境中不支持 Web API，没有 Element 、Event 、File 等对象，不支持选中元素，如 document.getElementById 、 document.querySelector 等；当然也不支持基于 DOM API 的程序库（如 jQuery）。这里提一下，weex不支持document.getElementById，这样获取控件的高度是做不到的，但是网上有人说可以，本人亲测无效。