序:
小程序的渲染层和逻辑层分别由 2 个线程管理:-------> WebView 与appServer。
渲染层的界面使用了 WebView 进行渲染 view线程负责解析渲染页面(wxml,wxss文件)
逻辑层采用 JsCore ( appServer线程 )线程运行 JS 脚本 负责运行js。
下面分三点来讲线程的运行机制
1: 线程 运行环境与开发环境
2:双线程之间的通信
3:线程与生命周期
1:线程运行环境与开发环境
view线程: ios:safari,Android:X5浏览器 开发工具:chrome
appServer线程:ios:JavaScriptCore,Android:X5内核 开发工具:nwjs
2:双线程通信------>线程和线程如何通信?------>view线程和appServer线程如何通信
view线程:渲染层中界面渲染相关的任务全都在 WebView 线程里执行----->通过逻辑层代码去控制 渲染哪些界面。一个小程序存在多个界面,所以渲染层存在多个WebView 线程
appServer线程:在逻辑层上----->执行的都是有关小程序业务逻辑的代码----->运行js
双线程通信:
Native分别在视图层和业务逻辑层注入WeixinJSBridge,这样视图层和业务层可以与Native进行通信
逻辑层和渲染层通过Native作为中介来处理或者转发信息,
逻辑层发送网络请求也经由 Native 转发。
线程与生命周期
界面渲染的整体流程
1:在渲染层将wxml文件与wxss文件转成js对象,也就是虚拟的dom
2 逻辑层生成数据,把数据与虚拟的dom相结合,得到真实的dmo,然后在交给渲染层渲染
3 当有数据变化的时候,逻辑层负责更新数据,js对象发生改变,这种改变方式采用的是diff算法进行比较,只改变变化的部分
4 将更新的数据,进行反馈,再次得到虚拟的dmo中,从而更新页面。
diff算法:
Diff算法的作用是用来计算出**VirtualDOM**中被改变的部分,然后针对该部分进行原生DOM操作,而不用重新渲染整个页面。
1、在渲染层将wxml文件与wxss文件转化成js对象也就是虚拟DOM
2、在逻辑层将虚拟的DOM对象配合生成真实的DOM树,再交给渲染层渲染
3、当数据变化时,逻辑层提供更新数据,js对象发生改变,用diff算法进行比较
4、将更新的内容反馈到真实的DOM树中,更新页面