小程序原理

Webview架构

小程序采用的三层架构设计：

• 视图层 ：通过多webview方案，每个页面都有独立的webview去渲染页面，并通过逻辑层控制渲染。
• 逻辑层 ：使用客户端的JS引擎(Android是X5内核引擎，IOS是safari开源的JSCode引擎)来独立运行JS逻辑。
• Native/JS绑定层 ：中转视图和逻辑层的通信；注入微信SDK组件库等拓展能力；请求发送、离线缓存、组件渲染等工作。

（setData传输视图层和逻辑层的数据。）

视图层

为什么设计成多webview

1. 剥离逻辑层，只使用webview成熟丰富的渲染能力，而不会受到js执行的阻塞。
2. 接近原生的体验，页面使用各自独立的webview，而不需要在页面间跳转时卸载重渲染。

逻辑层

浏览器的JS引擎有什么问题

功能过于丰富和自由，例如页面跳转，操作dom，插入脚本等开放性能力都有安全隐患。

现成的独立线程方案有什么问题

ServiceWorker、WebWorker都可以创建独立线程来执行javascript，虽然看似能解决安全问题，但小程序是多webview设计，在这个架构下使用某一个 webView中的 ServiceWorker去管理所有页面是不合理的。

客户端内置JS引擎

所以最终小程序使用客户端自带的 js引擎（iOS是 javaScriptCore，Android是腾讯x5内核引擎），通过Native创建一个单独的线程去执行 javaScript

Native/JS绑定层

1. 双线程通信：作为逻辑和视图层的通信中转层。
2. 动态注入：微信 SDK 、底层基础库、Service等放在Native 中，在加载页面的时候再动态的注入，可以减小包体积，减少网络请求，拓展功能。
3. 其他功能：发送请求、离线缓存、组件渲染（复杂组件由Native渲染提升性能）。

setData通信流程

暂时无法在飞书文档外展示此内容

Skyline架构

2023年7月5日微信小程序基础库3.0.0发布，同时启用了 skyline架构。

小程序优化

setData

1. 与渲染无关的不放进data中，需要observer的渲染间接数据使用puredataPattern
2. 合并setData，仅在需要页面更新的时候调用
3. 控制setData的数据范围，只更新需要更新的组件数据而不干扰父组件
4. 只更新变化组件不全量更新
5. 不在后台页面使用setData，用户看不到的页面没必要急于更新，而且会阻塞用户可见页面的更新