为什么小程序比较快？
安装包缓存
分包加载
双线程
webview预加载
native组件
什么是wxs?
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
与 WXML 是在同一个线程运行的，避免了跨线程通信的开销
双线程
- 逻辑层：创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码
- 渲染层：界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程
- 双线程通信
- 在渲染层把 WXML 转化成对应的 JS 对象。
- 在逻辑层发生数据变更的时候，通过宿主环境提供的 setData 方法把数据从逻辑层传递到 Native，再转发到渲染层。
- 经过对比前后差异，把差异应用在原来的 DOM 树上，更新界面。
- 优点：不会阻塞，可以有多个webview,页面切换更流畅
- 缺点：
- 在 page-frame 上无法调用业务 JS。
- 跨线程通信的成本很高，不适合需要频繁通信的场景。
- 业务 JS 无法直接控制 DOM。
所以引入了wxs
1.png
运行机制
冷启动 热启动
更新机制
- 冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。
- 如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。
运行机制
- 小程序没有重启的概念
- 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁
- 当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁
view
- wcc index.wxml
- wcsc index.wxss
- component 使用Polymer框架实现Web Component
- Native Component 目前Native实现的组件有canvas video map textarea;Native组件层在WebView层之上
webview预加载
每次小程序进入除了当前页面,Native预先额外加载一个WebView
当打开指定页面时，用默认数据直接渲染，请求数据回来时局部更新
返回显示历史View
退出小程序，View状态不销毁
逻辑层
数据绑定 Binding
单向数据流
- 识别哪个UI元素被绑定了相应的对象。
- 监视对象状态的变化。
- 将所有变化传播到绑定的视图上。
生命周期 Life Cycle
渲染层和逻辑层之间通信，是通过 Native 转发实现的。
逻辑层通过 Page 实例的setData方法传递数据到渲染层。由于需要两个线程的一些通信消耗，为了提高性能，每次只设置需要改变的最小单位数据。
生命周期顺序：onLoad -> onShow -> onReady。
mina-lifecycle.png
API
通过WeixinJSBridge和Native 进行通信
路由 Router
小程序优点
- 提前新建WebView，准备新页面渲染。
- View层和逻辑层分离，通过数据驱动，不直接操作DOM。
- 使用Virtual DOM，进行局部更新。
- 全部使用https，确保传输中安全。
- 加入rpx单位，隔离设备尺寸，方便开发。
优化
分包加载
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
setData原理
setData函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）。逻辑层需要更改界面时，只要把修改后的 data 通过 setData 传到渲染层。传输的数据，会转换为字符串形式传递，故应尽量避免传递大量数据。渲染层会根据前面提到的渲染机制重新生成 VD（虚拟 DOM）树，并更新到对应的 DOM 树上，引起界面变化。
一次交互，通过setDATA引起页面变化，要进过4次通信，强交互的场景会出现卡顿，所以引入原生组件
渲染层 -> Native（点击事件）。
Native -> 逻辑层（点击事件）。
逻辑层 -> Native（setData）。
Native -> 渲染层（setData）。
数据预加载 先App中请求数据,在index.js使用数据
安全与管控
- 客户端系统有 JavaScript 的解释引擎，则可以创建一个单独的线程去执行 JavaScript，这个环境下只执行有关小程序业务逻辑的代码。界面渲染相关的任务呢，就丢到 webview 线程里面，通过逻辑层代码去控制渲染哪些界面。
- 把开发者的 JS 逻辑代码放到单独的线程去运行，因为不在 Webview 线程里，所以这个环境没有 Webview 任何接口，自然的开发者就没法直接操作 DOM，也就没法动态去更改界面或者抓取页面数据。
- 同时小程序不支持动态载入脚本，XSS 漏洞自然也无缝可钻
- 官方审核
- 每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名与进行网络通信
- 须使用 HTTPS 发起网络请求。请求时系统会对服务器域名使用的 HTTPS 证书进行校验，如果校验失败，则请求不能成功发起。
- token机制避免CSRF 在小程序中调用wx.login()，能拿到一个code作为用户登录凭证（有效期五分钟）。在开发者服务器后台，开发者可使用code换取openid和session_key等信息（code只能使用一次）
网友评论