小程序技术原理分析

背景

随着移动互联网的沉淀，超级APP成为新的底层平台，于是开始探索在体内构建轻应用的可能，开发新的流量入口、建立全面的用户关系。

轻型应用帮助平台拓宽了横线竞争的战场，由软到硬，由应用到系统，各领域的头部企业纷纷潜入轻应用底层。在自己的生态上发展轻型应用。

从2017年1月小程序正式发布以来，日活用户超4亿，全面进入了生活服务、政务、交易、内容、电商、教育等日常生活中各个领域。

我们今天就一起来了解一下微信小程序这个背靠“微信”这座巨无霸大山的小应用背后的技术。
我们会从以下几个角度去分析小程序的运行机制和它的整体技术架构。

小程序诞生的技术背景

最初在小程序没有出来之前，微信WebView逐渐成为移动Web重要入口。微信发布了一整套网页开发工具包，称之为 JS-SDK，让所有Web
开发者都可以使用到微信的原生能力。

但JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题，比如受限于设备性能和网络速度，会出现白屏的可能。因此又设计了一个增强版JS-SDK，也就是“微信 Web 资源离线存储”，但在复杂的页面上依然会出现白屏的问题，在页面切换会有生硬和点击的迟滞感。
这个时候需要一个可以让用户体验更好的一个系统，小程序应运而生。

相比于原来的WebView，小程序的优点有：

• 快速的加载（静态资源存放在本地）
• 更强大的能力（依托于宿主环境提供的能力）
• 原生的体验
• 易用且安全的微信数据开放（调用微信获取用户信息）
• 高效和简单的开发（开发语言都是js，html和css也基本一致）

WebView 是移动端（手机、IPad）提供的运行 JavaScript 的环境，是系统渲染 Web 网页的一个控件，可与页面 JavaScript 交互，实现 APP 与 Web 的混合开发，WebView 渲染 Web 页面需要强大的渲染内核支持，这其中 Android 与 IOS 系统的内核又有所不一样。

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

宿主环境

微信小程序的宿主环境为微信客户端，它是依赖于微信客户端上运行的，并且跟小程序 基础库 版本有重大关联关系。
我们可以把微信客户端 以及 小程序基础库 简称为微信小程序的宿主环境。

微信小程序可以调用宿主环境提供的微信客户端的能力，完成许多普通网页无法完成的功能。这就使得小程序比普通网页拥有更多的能力。小程序会运行在不同版本（不同的微信客户端+不同基础库）的宿主环境下，因此不可以避免地有时候需要为不同版本的宿主环境做程序上的兼容。

执行环境

小程序的开发和普通的网页开发相比有很大的相似性，主要开发语言都是 JavaScript，但是二者还是有些差别的。

• 普通网页开发，渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应；
  而在小程序中，二者是分开的，分别运行在不同的线程中；
• 普通网页开发，可以使用各种浏览器提供的 DOM API，进行 DOM 操作；
  小程序的逻辑层和渲染层是分开的，视图层的界面使用 WebView 进行渲染，逻辑层运行在 JSCore中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
• 网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可；
  小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程才能完成。
• 网页开发，需要面对各厂商的浏览器，在移动端还需要面对Safari、Chrome，以及iOS、Android系统中的各种Webview；
  微信小程序运行在多种平台上：iOS（iPhone/iPad）微信客户端、Android微信客户端、PC微信客户端、Mac微信客户端和用于调试的微信开发者工具。

小程序在