「这是我参与11月更文挑战的第25天,活动详情查看:2021最后一次更文挑战」
前言
我们都知道 JavaScript 是单线程的,而小程序的逻辑层是采用JsCore
线程运行JS脚本
的,那为什么小程序要弄成双线程架构呢。
为什么使用双线程架构
小程序分为视图层和逻辑层,视图层的相关任务全都在WebView
里执行。一个小程序存在多个界面,所以视图层存在多个WebView
线程。而逻辑层采用JsCore
线程运行JS脚本
。他们之间通过系统层的WeixinJsBridge
进行通信,也就是逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。如下图
web页面开发有几个问题
- 体验:用户在访问网页的时候,在浏览器开始显示之前都会有一个白屏的过程,受限于设备性能和网络速度,白屏会更加明显。为了解决体验问题,微信推出“微信 Web 资源离线存储”,类似 HTML5 的 Application Cache,能解决部分白屏问题,但是web的体验上还是和原生有着很大落差,例如页面的切换,页面加载条等。
- 管控:web页面自由度很高,需要花很大的人力去检查页面是否存在违规等操作。
所以小程序双线程模式主要解决了这两个问题体验和管控
- 体验:web页面开发渲染线程和脚本线程是互斥的,长时间的脚本运行可能会导致页面失去响应或者白屏。而双线程模式是不会有这个问题的。而且这个模式下,强制使用了MVVM框架的数据驱动,即让视图状态和视图绑定在一起,同时也使用了虚拟dom优化体验
- 管控:阻止开发者使用浏览器的开发性接口,通过提供一个沙盒环境来运行开发者的js代码,只能使用微信提供开放的方法来获取元素的一些信息。这样就避免开发者的操作不在管控范围。除了JS用沙盒环境管控,html也改用了封装过的wxml(WeiXin Markup language) ,css改为wxss(WeiXin Style Sheet),为了管控,同时也是为了提供更多功能,例如封装了播放直播的live-player、滚动选择器picker-view。另外,也提供了wxs(WeiXin Script)让wxml在渲染的时候也可以做一些逻辑处理。
实现原理
小程序是基于WEB规范封装的一套Hybrid框架,小程序的渲染层和逻辑层是用多个webview实现的,逻辑层的JS代码全部载入到一个Webview里面,称之为AppService,整个小程序仅仅有一个,而且整个生命周期常驻内存;而全部的视图(wxml和wxss)都是单独的Webview来承载,称之为AppView。
渲染层和逻辑层的分工:
- 渲染层(WXML、WXSS文件)和数据相关。即:怎样表现数据
- 逻辑层(js文件)负责产生、处理数据。即:什么样的数据
我们在渲染层的请求并不会直接到了逻辑层,而是会先到了系统层。在系统层先进行操作处理一部分功能再将数据传递给逻辑层,逻辑层也一样。 所以不能频繁进行setdata请求绑定交互。
如果当前数据并不会在页面中进行显示,数据也不应该定义在data中,否则每次在进行数据绑定时,这些数据也会进行一次从数据层到逻辑层的传递,占用了系统层的资源。
另外,由于是Hybrid框架,让开发者能以近似Web的方式开发,并且可以在线更新代码,只是要经过微信审核。但是原生Native部分的能力是有版本差异的,所以小程序开发者在使用一些新的能力时候需要增加版本控制。