我从小程序学到了什么(一)

前言

最近在看小程序相关,从技术角度来看小程序在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预加载吗?我们也能做微信开发者工具吗?接下来我们也会渐渐结合我们自身的业务场景继续和大家分享。

由于第一篇为了给后面的知识内容做些准备,所以用到了微信官网的一些内容和图片,特此说明,侵删。

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

请大家关注微信公众号:大前端工程师,里面还有更多的技术文章与总结。

文章被以下专栏收录

    定期推送资深工程师的原创文章,话题以前端为主,当然也会涉及到后端以及其它话题,重要的是一定都是原创。