我从小程序学到了什么（一）

前言

最近在看小程序相关，从技术角度来看小程序在Hybrid的优化过程有不少值得咱们学习的地方，因此我想在学习的同时也能有所输出，在这个系列我不会讲怎么去申请一个小程序，怎么去开发一个程序，而是讲从小程序咱们能学到什么，尽管它如今还存在不少问题，但大范围的使用会推进小程序将微信技术生态作到极致，使用到Hybrid技术的公司很是多，但愿个人系列文章能对你们有所帮助。

在微信下的页面技术演变

从技术的角度来看，其实微信的页面技术是小程序的前身，以下图。

在微信里面的网页，能够经过JS-SDK来调用微信native，让开发者使用到微信的原生能力，当JS-SDK公布后受到不少开发者的欢迎，但随着普遍的使用，开发者们又遇到了不少问题。

• 白屏

用户在手机访问微信的一个h5，因为移动设备的限制和网络速度，都会有一个明显的白屏。
微信团队用了不少精力来解决这个问题，就出现了后面的JS-SDK加强版，这里面有个比较重要的功能就是：离线存储。 离线存储简单的理解就是从本地加载web资源而再也不从服务端拉取，从而避免网络速度的瓶颈。
离线存储下降了网络延时大大提升了h5的用户体验，但在一些复杂的页面依然会有白屏的问题，这里主要是js和css的复杂性会占用大量的UI线程而影响WebView的渲染。
其实目前大部分公司使用的是相似JS-SDK方案：灵活的网页开发+ 丰富的原生功能 + 离线存储。

• 没有native流畅的操做

有些团队使用SPA框架来模拟native的原生页面切换，但SPA也有本身的弊端，随着业务的复杂，颇有可能让WebView的负担愈来愈大，并且作到这一点须要开发者有足够的时间和精力。

• 安全

对攻击防不胜防，浏览器下的js是很是灵活，能够对Dom和Bom随意操做，能够随意跳转，能够动态执行等等。

因此，微信可否解决之上的问题呢，微信的页面是否能作到如下：

1. 快速的加载
2. 强大的能力
3. 流畅的体验
4. 安全
5. 开发成本低

这就是小程序。

小程序的技术选型

小程序若是想解决以前纯网页技术的一些问题，必需要作一些新的尝试

• 能否使用Native技术

要达到快速的加载和流畅的体验，是否是直接基于微信的客户端开发就Ok了呢？但这有个问题，这么作意味着小程序的代码须要和微信客户端代码一块儿发布，这种节奏确定没法知足的。

• 能否使用ReactNative

RN虽然用javascript解释执行，但渲染方面仍是Native渲染，其实RN能解决加载和渲染的问题，但它也仍然有些不足，这里引用微信官方给的缘由

1. 对css的支持问题没法知足web开发者日渐增加的需求，若是改造也要花很大精力和风险。
2. 到目前仍是有些性能的坑以及bug，对于复杂一些的页面比较难以胜任。
3. 不可预期的因素，好比以前闹的沸沸扬扬的许可证。

纯h5有不少弊端，纯Native又不可能知足发版的需求，RN又不是很成熟，因此最终微信在面对本身的技术生态下对小程序的选型仍是Hybrid，界面由成熟的Web技术渲染，逻辑由成熟的Js解析和执行，再加上微信Native提供的原生能力。但要实现之上所说的需求，小程序仍是须要基于Hybrid作突破。

双线程模型

双线程：小程序的逻辑层与渲染层是分开两个线程， 逻辑层的js用到Native自身的JSCore来解析和执行，而界面仍是经过WebView来渲染。通讯过程以下图（图片来自微信官方文档，侵删）：

通常的Hybrid技术，WebView既作js解析和执行，还要渲染html和css，当页面比较复杂时，颇有可能出现界面的渲染等待JS的执行从而形成白屏现象，咱们用双线程能够下降Webview的负担，在复杂的页面交互里能够并行js执行与界面渲染。 另外Native的Jscore仅仅只是实现了ECMAScript标准，它不像浏览器还须要实现DOM与BOM，因此在小程序里经过js没法操做dom，没法使用BOM，这也在必定程度上解决了安全和管控的问题。

小程序的javascript

如上所说，小程序的javascript是由JSCore来实现ECMAScript，除了这个以外小程序还提供了一个框架和一系列api，这些底层的升级是与微信客户端的升级同步的。

（图片来自微信官方文档，侵删）：

总结

微信页面以及小程序的技术体系其实与大多数公司一致，但微信作为一个平台会将安全与性能作到极致，虽然大部分公司不须要作到微信这种平台体量，但它的技术演进仍是能给咱们不少借鉴，好比咱们能够也用多个WebView吗？咱们也能够用双线程吗？咱们也能够作WebView预加载吗？咱们也能作微信开发者工具吗？接下来咱们也会渐渐结合咱们自身的业务场景继续和你们分享。

因为第一篇为了给后面的知识内容作些准备，因此用到了微信官网的一些内容和图片，特此说明，侵删。

参考文献：小程序开发指南

如想阅读更多文章，能够关注咱们的微信公众号：大前端工程师