小程序的架构要求:快!加载快、渲染快…… 渲染界面的技术:Hybrid 技术,介于原生技术和web 技术之间。 若使用纯客户端原生技术,小程序代码需要与微信代码一起编包,跟随微信发版,这种开发节奏必然是不对的。 所以小程序像Web 技术那样,有一份随时可更新的资源包放在云端,通过下载到本地,动态执行后即可渲染出界面。 若使用纯 Web 技术来渲染小程序,UI渲染跟 JavaScript 的脚本执行都在一个单线程中执行,这就容易导致一些逻辑任务抢占UI渲染的资源。 所以,渲染层使用了多个WebView线程渲染,从而避免了单个WebView的任务过于繁重,让用户有更好的交互体验。 最终,小程序界面主要由成熟的 Web 技术多线程渲染,部分功能是由客户端原生能力实现。
小程序里可以写JavaScript,是因为客户端系统javaScript 解释引擎,在iOS下是用内置的 JavaScriptCore框架,在安卓则是用腾讯x5内核提供的JsCore环境。 至于小程序的js中没有DOM 操作,是出于安全考虑的,比如我们使用window.location 可以跳转任意页面,就会带来一定的风险。 小程序把JavaScript 代码放在了一个沙箱环境里,阻止了用户对DOM 的直接操作,小程序只提供纯JavaScript 的解释和执行环境。
直接使用HTML 搭建视图会有以下缺陷:
存在管控与安全问题标签众多,增加理解成本接口太底层,不利于快速开发能力有限,会限制小程序的表现形式基于以上问题,小程序设计了Exparser组件框架,它对html 的功能进行了封装。
原生组件和普通view、text之类的组件相比,比较特殊,它的渲染还有微信客户端的参与,这就是小程序Hybrid技术的一个应用。 比如地图的渲染:
<map latitude="39.92" longtitude="116.46"></map>map 组件只是提供了渲染的区域,真正绘制地图的是微信客户端的腾讯地图功能。 腾讯地图功能是内置在微信里的,只要我们安装了微信,就可以使用此功能。 因为微信小程序是依托于微信的,所以它也可以调取微信中的地图功能。
原生组件的优点: 扩展Web的能力。比如像输入框组件(input, textarea)有更好地控制键盘的能力。 体验更好,同时也减轻WebView的渲染工作。比如像地图组件(map)这类较复杂的组件,其渲染工作不占用WebView线程,而交给更高效的客户端原生处理。 绕过setData、数据通信和重渲染流程,使渲染性能更好。比如像画布组件(canvas)可直接用一套丰富的绘图接口进行绘制。
