社区首页 >专栏 >直击本质：聊聊小程序的前世今生

直击本质：聊聊小程序的前世今生

薛定喵君

发布于 2020-12-31 02:44:43

1K0

一文带你了解小程序技术的发展脉络。

提到小程序，大家就会不自觉地带上(微信)两个字吧，但是对于小程序这一应用形态的探索却不是最先从微信开始的。首先我们来问自己一个问题，小程序是啥？(可以先自己思考一下) 之前分享过一个图片小程序发展时间轴，我们可以知道业界对于这一技术领域的探索已经持续了7年了。 (微信)小程序的前身叫"应用号"，我们可以知道它首先是个应用。所以当你听到『小程序就是个H5嘛~』这种说法是有失偏颇的，h5是一种技术，遵循W3C的开放标准规范，可以运行在符合H5标准的容器内(外壳是浏览器)，小程序则是有自己的封闭规范的，它是一个应用，运行的壳子是APP。

# 轻应用

在微信应用号之前，2013年的时候百度就基于H5技术推出了轻应用这种形态，轻应用如何理解？我们可以把它当做是加强版的H5，webview+JS API从而实现更多功能。这一形态的顶峰则是2015年1月9日微信公众平台面向开发者开放微信内网页开发工具包（微信JS-SDK）。

通过微信JS-SDK提供的11类接口集，开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题，因为它的架构还是Browser/Server，所以依然还是会出现诸如白屏、卡顿等性能问题。

# 流应用

B/S 应用除了 JSON 数据外，还需要每次从服务器加载页面 DOM、样式、逻辑代码，导致 B/S 应用的页面加载很慢，体验很差。Hybrid 混合应用是 JS 编写的需要安装的 App，架构是Client/Server，页面加载时只需获取JSON数据，体验大大提升，但是仍然需要安装、更新。那么如何实现 Hybrid 应用的即时更新呢？

所以『流应用』的概念应运而生，把之前 Hybrid 应用里的运行于客户端的 JS 代码，先打包发布到服务器，制定流式加载协议，手机端引擎动态下载这些 JS 代码到本地，并且为了第一次加载速度更快，实现了应用的边下载边运行，让 JS 应用功能体验达到原生，并且可即点即用、可直达二级页面。

这套技术的核心是要把客户端引擎预预置在手机端，于是2015年 360 手机助手内嵌了客户端引擎实现了名为『360 微应用』的流式应用，做到了应用的秒开。

# 小程序

在2015年9月，DCloud 推进微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，以及分享了webview体验优化的经验。随后的2016年，微信团队经过分析，放弃了HTML5中国产业联盟的标准，订制了自己的标准、自研引擎。

2016 年 1 月 11 日，微信公开课，张小龙罕见露面，公布了微信应用号的计划。
2016 年 9 月 21 日，微信宣布更名应用号为小程序，面向首批开发者内测。
2017 年 1 月 9 日，微信公开课，小程序正式发布。

随后各大厂商陆续推出了自己的小程序平台。

然而这不是最难的，小程序作为前端开发的一个细分领域出来了，但是开发者呢？开发工具、框架、组件、模板、以及各种轮子呢... 之前好不容易写的代码让我再用小程序的技术标准重写一遍？怎么保证我的投入产出？开发者们仿佛又回到了原始社会，一切都需要重来。

小程序丢弃了国际标准组织 W3C 的 DOM 和 Window 标准，仅仅采用基础 JavaScript。这意味着 HTML5 生态的各种轮子无法复用，要完全重造一个新的小程序开发生态。

幸运的是小程序做到了，随着跳一跳引爆小程序，各大厂商跟进。越来越多的开发者加入到了小程序的技术生态中来，小程序的开发效率也在不断提高，成本也在不断降低，中小型创业公司往往会选择小程序测试自己的产品MVP，快速迭代自己的业务。

终于，国际标准之外，在中国，建立起了自己的技术生态，时至今日小程序已经拥有了数百万开发者，日活4亿，全网小程序数量超550万，已有 11 家企业入局小程序赛道，包括微信小程序、QQ 小程序、京东小程序、360 小程序、网易云小程序、美团小程序、字节跳动小程序、百度小程序、支付宝小程序、轻淘店、快应用，纷纷在小程序方面进行发力。

# 小程序的本质

看到这里，让我们回到最初的问题--小程序的本质是什么？应该有不少同学心中已经有了答案了吧...没错，小程序本质上还是一个 Hybrid 应用(即混合模式应用)。

渲染界面的技术有三种：

用纯客户端原生技术来渲染
用纯 Web 技术来渲染
介于客户端原生技术与 Web 技术之间的，互相结合各自特点的技术（统称 Hybrid 技术）来渲染

小程序的宿主是微信，所以不太可能用纯客户端原生技术来编写小程序。如果这么做，那小程序代码需要与微信代码一起编包，跟随微信发版本，这种方式跟开发节奏必然都是不对的。因此，我们需要像Web 技术那样，有一份随时可更新的资源包放在云端，通过下载到本地，动态执行后即可渲染出界面。

但是，如果用纯 Web 技术来渲染小程序，在一些有复杂交互的页面上可能会面临一些性能问题，这是因为在 Web 技术中，UI渲染跟 JavaScript 的脚本执行都在一个单线程中执行，这就容易导致一些逻辑任务抢占UI渲染的资源。

最终，小程序选择了类似于微信 JSSDK 这样的 Hybrid 技术，界面主要由成熟的 Web 技术渲染，定义了一套内置组件以统一体验，并且提供一些基础和通用的能力，辅之以大量的接口提供丰富的客户端原生能力。同时，每个小程序页面都是用不同的WebView去渲染，这样可以提供更好的交互体验，更贴近原生体验，也避免了单个WebView的任务过于繁重。

开发者上传代码时，微信开发者工具直接将本地的代码文件提交到后台，由后台进行编译打包。在渲染层使用的各类组件，在逻辑层使用的各类API都是小程序基础库提供的，用户在使用小程序时会先载入基础库，接着会从CDN服务器下载小程序代码包再载入业务代码，最后完成小程序首页初始化。此后，如果小程序代码包未更新且还被保留在缓存中，则下载小程序代码包的步骤会被跳过。

这一套全新的系统使得所有的开发者都能做到：