微信小程序之数据的同步渲染

微信小程序之数据的同步渲染

结论: 微信小程序通过setData方法实现数据的同步渲染，直接修改data无法实现同步渲染。

setData工作原理

小程序分为逻辑层和渲染层，而每次逻辑层改变了，要借用Native运行。小程序的渲染层和逻辑层由两个线程管理：渲染层的界面使用了 WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程，逻辑层和渲染层两个线程的通信会经由微信客户端 Native 做中转，逻辑层发送网络请求也经由 Native 转发。

使用setData方法其实就是将逻辑层的数据通过Native进行中转同步到渲染层，所以我们不要重复 setdata, ，但是也要减少数据的传输量。我们的数据传输实际是一次 Javascript 脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程。

方法是去除不必要的事件绑定（ WXML 中的 bind 和 catch ），从而减少通信的数据量和次数。

Native

native是使用原生系统内核的，相当于直接在系统上操作。是我们传统意义上的软件，更加稳定。

webView

webView是Android内置webkit内核的高性能浏览器,而WebView则是在这个基础上进行封装后的一个 控件,WebView直译网页视图,我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件！

JsCore

JSCore是WebKit默认内嵌的JS引擎，之所以说是默认内嵌，是因为很多基于WebKit分支开发的浏览器引擎都开发了自家的JS引擎，其中最出名的就是Chrome的V8。这些JS引擎的使命都相同，那就是解释执行JS脚本。而从上面的渲染流程图我们可以看到，JS和DOM树之间存在着互相关联，这是因为浏览器中的JS脚本最主要的功能就是操作DOM树，并与之交互。

相比静态编译语言生成语法树之后，还需要进行链接，装载生成可执行文件等操作，解释型语言在流程上要简化很多。这张流程图右边画框的部分就是JSCore的组成部分：Lexer、Parser、LLInt以及JIT的部分（之所以JIT的部分是用橙色标注，是因为并不是所有的JSCore中都有JIT部分）。接下来我们就搭配整个工作流程介绍每一部分，它主要分为以下三个部分：词法分析、语法分析以及解释执行。