小程序原理

小程序与普通网页开发的区别

• 小程序的主要开发语言是 JavaScript，小程序的开发同普通的网页开发相比有很大的相似性。
• 网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应（白屏），而小程序渲染时基于 双线程 模型的，在这个模型中小程序的 逻辑层 与 渲染层 分开在不同的线层运行。（逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等在小程序中是无法运行）。
• JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 包在小程序中也无法运行。
• 微信客户端给小程序提供宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。

小程序的运行环境

双线程的优劣

• 小程序是基于双线程模型，那就意味着任何数据传递都是线层间的通信，也就是统一都会有一定的延迟，不像传统web，当界面需要更新时，通过调用更新接口UI就会同步地渲染出来。在小程序的架构里，一切都是异步。
• 除了逻辑层与渲染层之间的通信有延时，各层与客户端原生交互同样是有延时的。
• 异步带来的好处，页面也和j JS 并行执行，不会出现传统web端js阻塞页面渲染的情况。

渲染层和逻辑层

• 小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
• 小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

小程序的通信模型

小程序运行机制

• 热启动：用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台
• 冷启动：用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

程序与页面

• 小程序页面渲染的技术能力是基于原生web和native 的 Hybrid 技术
• 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地