前言

最近，我在看小程序的相关性。从技术角度来说，小程序在Hybrid的优化过程中有很多需要学习的地方，所以我想边学习边输出。在这个系列中，我不会谈论如何申请小程序以及如何开发小程序，而是我们可以从小程序中学到什么。虽然还存在很多问题，但小程序的广泛使用将把微信的技术生态推向极致。

在微信下的页面技术演变

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

在微信中的网页上，我们可以通过JS-SDK调用微信原生，让开发者可以利用微信的原生能力。JS-SDK发布的时候，受到了很多开发者的欢迎，但是随着它的广泛使用，开发者遇到了很多问题。

白屏用户在手机上访问一个h5的微信，由于移动设备和网速的限制，会出现明显的白屏。微信团队花了大量精力解决这个问题，随后出现了JS-SDK的增强版，它有一个更重要的功能：离线存储。对离线存储的简单理解就是在本地加载web资源，而不是从服务器上拉取，这样就避免了网络速度的瓶颈。离线存储减少了网络延迟，大大提升了h5的用户体验。然而，在一些复杂的页面中仍然存在白屏的问题。这里js和css的复杂性会占用大量UI线程，影响WebView的渲染。事实上，目前大多数公司都在使用类似JS-SDK的方案：灵活的网页开发和丰富的本机功能用于离线存储。

没有原生的流畅运行，有些团队使用SPA框架模拟原生页面切换，但是SPA也有自己的弊端。随着业务的复杂化，很可能会让WebView的负担越来越重，而要做到这一点，就需要开发人员有足够的时间和精力。

安全不能阻止攻击。浏览器下的js非常灵活，可以随意操作Dom和Bom，随意跳转，动态执行等等。

那么，微信能否解决上述问题，微信页面能否做到以下几点：

加载速度快，能力强大，体验流畅，安全开发成本低，这是一个小程序。

小程序的技术选型

小程序要想解决之前纯web技术的一些问题，必须做一些新的尝试。

我们可以使用Native技术来实现快速加载和流畅体验吗？直接基于微信开发客户端可以吗？但是有一个问题。这样做意味着小程序的代码需要和微信客户端的代码一起发布，这种节奏是无法满足的。

可以使用ReactNativeRN吗？虽然javascript用于解释执行，但是呈现方面是Native呈现。事实上，RN可以解决加载和渲染的问题，但它仍然有一些缺点。

对css的支持不能满足web开发人员日益增长的需求，如果进行改革，将会耗费大量的精力和风险。到目前为止，仍然存在一些性能漏洞和bug，无法胜任更复杂的页面。不可预测的因素，比如之前一直肆虐的许可证。纯h5有很多缺点。纯Native不能满足发行需求，RN也不是很成熟。所以最终，面对自己的技术生态，微信选择了Hybrid小程序，成熟的Web技术渲染界面，成熟的Js解析和执行逻辑，以及微信Native提供的Native能力。但是要达到上述要求，小程序还是需要在Hybrid的基础上有所突破。

双线程模型

双线程：小程序的逻辑层和渲染层被两个线程分开。逻辑层的js由Native自己的JSCore解析和执行，而接口则由WebView呈现。沟通过程如下：

通用混合技术，Webview不仅进行js解析和执行，还渲染html和css。当页面复杂时，很有可能是界面渲染等待js执行，导致白屏现象。我们可以通过使用多线程来减轻WebView的负担，在复杂的页面交互中可以并行执行JS执行和界面渲染。此外，Native Jscore只实现了ECMAScript标准，与浏览器不同，它还需要实现dom和BOM，因此在小程序中不可能通过js操作DOM和使用BOM，这也在一定程度上解决了安全和控制的问题。

小程序的javascript

如上所述，小程序的javascript是由JSCore实现的。除此之外，小程序还提供了框架和一系列API，这些底层的升级与微信客户端的升级同步进行。

总结

微信页面和小程序的技术体系其实和大部分公司是一样的。然而，作为一个平台，微信将在安全性和性能上达到极致。虽然大多数公司不需要达到微信的平台规模，但它的技术演进还是可以给我们很多教训。比如，我们还可以使用多个WebView吗？我们还可以用双线吗？我们还可以做WebView预加载吗？我们还能做微信开发者工具吗？接下来，我们将逐步结合自己的业务场景，继续与大家分享。