聊聊小程序运行机制的那些事 _小程序

小程序的由来在小程序没有出来之前，最初微信WebView逐渐成为移动web重要入口，微信发布了一整套网页开发工具包，称之为 JS-SDK，给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。
但JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题，比如受限于设备性能和网络速度，会出现白屏的可能。因此又设计了一个增强版JS-SDK，也就是“微信 Web 资源离线存储”，但在复杂的页面上依然会出现白屏的问题，原因表现在页面切换的生硬和点击的迟滞感。这个时候需要一个用户体验更好的一个系统，小程序应运而生。小程序主要具有以下的特点：

快速的加载
更强大的能力
原生的体验
易用且安全的微信数据开放
高效和简单的开发

文章插图

小程序与普通网页开发的区别小程序的开发同普通的网页开发相比有很大的相似性，小程序的主要开发语言也是 JAVAScript，但是二者还是有些差别的。

普通网页开发可以使用各种浏览器提供的 DOM API，进行 DOM 操作，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore
中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM
API 。
普通网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。
网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。
小程序的执行环境

文章插图

小程序架构一、技术选型
一般来说，渲染界面的技术有三种：

用纯客户端原生技术来渲染
用纯 Web 技术来渲染
用客户端原生技术与 Web 技术结合的混合技术（简称 Hybrid 技术）来渲染

通过以下几个方面分析，小程序采用哪种技术方案

开发门槛：Web 门槛低，Native 也有像 RN 这样的框架支持
体验：Native 体验比 Web 要好太多，Hybrid 在一定程度上比 Web 接近原生体验
版本更新：Web 支持在线更新，Native 则需要打包到微信一起审核发布
管控和安全：Web 可跳转或是改变页面内容，存在一些不可控因素和安全风险

由于小程序的宿主环境是微信，如果用纯客户端原生技术来编写小程序，那么小程序代码每次都需要与微信代码一起发版，这种方式肯定是不行的。
所以需要像web技术那样，有一份随时可更新的资源包放在云端，通过下载到本地，动态执行后即可渲染出界面。如果用纯web技术来渲染小程序，在一些复杂的交互上可能会面临一些性能问题，这是因为在web技术中，UI渲染跟JavaScript的脚本执行都在一个单线程中执行，这就容易导致一些逻辑任务抢占UI渲染的资源。
所以最终采用了两者结合起来的Hybrid 技术来渲染小程序，可以用一种近似web的方式来开发，并且可以实现在线更新代码，同时引入组件也有以下好处：