微信小程序之数据的同步渲染-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序之数据的同步渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

结论: 微信小程序通过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部分）。接下来我们就搭配整个工作流程介绍每一部分，它主要分为以下三个部分：词法分析、语法分析以及解释执行。文章来源地址https://www.toymoban.com/news/detail-503165.html

到了这里，关于微信小程序之数据的同步渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！