从微信小程序开发者工具源码看小程序架构设计实现原理 _小程序架构

使用微信小程序开发已经很长时间了，对小程序开发已经相当熟练了；但是作为一名对技术有追求的前端开发，仅仅熟练掌握小程序的开发感觉还是不够的，我们应该更进一步的去理解其背后实现的原理以及对应的考量，这可能会解释我们在开发过程中遇到的一些疑惑，比如为啥小程序不能操作dom、小程序是web技术渲染还是native技术渲染等等，另一方面对于我们个人成长也是有帮组的。
首先声明下，文章查看小程序开发者工具源码的方法仅限学习使用。
本文将从以下几个方面来说一下小程序的实现原理

如何查看小程序开发者工具源码
小程序架构设计
1、小程序渲染是在同一个线程吗？双线程机制
2、小程序是web渲染吗？界面渲染机制
3、小程序是用web的html标签渲染吗？Exparser组件框架
4、小程序可以操作dom吗？数据驱动

如何查看小程序开发者工具源码
下面我们通过微信小程序开发者工具的源码来说说小程序的底层实现原理。以开发者工具版本号State v1.02.1904090的源码来窥探小程序的实现思路。如何查看微信源码，对于mac用户而言，查看微信小程序开发者工具的包内容，然后进入Contents/Resources/App.nw/js/core/index.js，注释掉如下代码就可以查看开发者工具渲染后的代码。
// 打开 inspect 窗口 if (nw.App.argv.indexOf('inspect') !== -1) { tools.openInspectWin() }然后重启小程序开发者工具，就出现如下左侧页面，点击其中一个页面就能看到view层的dom结构，如下图右侧。

文章插图

文章插图

小程序架构设计
小程序的架构设计与web技术还是有一定的差别，其吸取了web技术的一些优势，同时也摒弃web技术中体验等不好的地方。下面通过问题的形式来说说小程序架构中的一些设计点。
1、小程序渲染是在同一个线程吗？双线程机制
开发过小程序的都知道，小程序是双线程设计，即视图渲染与业务逻辑分别在运行在不同的线程中。这个设计主要是解决web技术中的一个痛点：

【从微信小程序开发者工具源码看小程序架构设计实现原理】web页面开发渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应或者白屏，体验糟糕。

小程序为了更好体验，将页面的渲染线程和脚本线程分开设计在不同线程中执行，具体实现：

视图view层在webview中渲染，一个页面对应一个webview
业务逻辑Appservice层运行在同一个JSCore线程中，具体IOS是JAVAScriptCore，Android是X5 JSCore，开发者工具是webview中；

这样解决了长时间的脚本阻塞页面渲染的情况，但是也带来一些新的问题：

天生的延迟，线程间要通信
业务逻辑层因为运行在JSCore中无法访问DOM和BOM的api；

开发者工具使用webview加载业务逻辑层的代码，虽然依赖的环境有DOM和BOM api，为了保持一致；小程序对所有的模块进行了局部化处理使其不能访问这些api 。这样双线程通过native，开发者工具通过后台websocket服务来进行二者消息中转。具体可以参考官网图：

文章插图

2、小程序是web渲染吗？界面渲染机制
页面渲染的方式主要有三种：

纯web渲染
纯native原生渲染
Hybrid渲染，即web和native渲染结合

因为小程序的宿主环境是微信，不太可能使用纯native渲染，否则所有小程序需要跟微信一起编码发版。采用纯web渲染貌似是可行的，支持快速在线更新，通过加装最新资源到本地即可渲染；但是纯web渲染在一些有复杂交互的页面上可能会面临一些性能问题，这是因为在web技术中，UI渲染跟 JavaScript 的脚本执行都在一个单线程中执行，这就容易导致一些逻辑任务抢占UI渲染的资源。所以小程序采用Hybrid方式渲染，用官网的描述如下：
界面主要由成熟的 Web 技术渲染，辅之以大量的接口提供丰富的客户端原生能力。同时，每个小程序页面都是用不同的WebView去渲染，这样可以提供更好的交互体验，更贴近原生体验，也避免了单个WebView的任务过于繁重。既然采用Hybrid方式渲染，那么页面的渲染可能会用到原生native来渲染，什么情况会用到原生渲染呢？