小程序底层架构原理

在浏览器中的webapp是做不了监控的，而wa的表现是半native app，半web app，而native app与web app和一个很重要的区别就是native app有自己的生命周期，在这之中，我们可以根据生命周期的不同时间段做出不同的调整，比如常驻内存，防止被系统杀掉，系统后台保存活度等等，而web app就没有这回事了，仅仅能够根据事件做出不同的调整，跟原生app比起来，体验就差了一些。基于此，wa当然不会像web app一样了，他需要有自己的生命周期。
　　本质上来说，wa还是运行在浏览器模式中，而承载wa的系统就是微信，用微信来管理wa的生命周期。而微信，现在本身就是一个系统。

1.与h5页面的区别

• 运行环境：小程序基于微信系统，而 h5 的宿主环境是浏览器。所以小程序中没有 DOM 和 BOM 的相关 API ， jQuery 和一些 NPM 包都不能在小程序中使用；
• 系统权限：小程序能获得更多的系统权限，如网络通信状态、数据缓存能力等；
• 渲染机制：小程序的逻辑层和渲染层是分开的，而 h5 页面 UI 渲染跟 JavaScript 的脚本执行都在一个单线程中，互斥。所以 h5 页面中长时间的脚本运行可能会导致页面失去响应

2.双线程的小程序

小程序的渲染层和逻辑层分别由 2 个线程管理：渲染层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行 JS 脚本。

image.png
1.在渲染层把 WXML 转化成对应的 JS 对象。
2.在逻辑层发生数据变更的时候，通过宿主环境提供的 setData 方法把数据从逻辑层传递到 Native，再转发到渲染层。
3.经过对比前后差异，把差异应用在原来的 DOM 树上，更新界面。