小程序技术全解 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第13天。

小程序与WEB的区别

1. 有着固定的语法以及统一的版本管理，平台可以更方便的进行审核。
2. 平台能够控制各个入口，如二维码，文章内嵌，端内分享，入口上也能够带来更好的用户体验。
3. 小程序基于特殊的架构，在流畅度上比 WEB 更好，有更优秀的跳转体验。

小程序原理

在平台上（比如微信）开发第三方应用最简单、最方便的方式：WebView 和 JSBridge。

WebView：可以简单理解为app内置的浏览器。

JSBridge：app上的一些功能比如打开相机等，单靠 web api无法做到，这时候就需要用 JSBridge 作为 js 和 native 之间的桥梁，让两者可以相互沟通起来相互调用。

这样的做法会存在一些问题：

1. 无网络的情况下体验不佳
2. 页面切换体验不佳
3. 不容易管控保证安全（可以利用 JSBridge 破坏平台安全）

小程序设计的三个目标：

1. 开发门槛低
2. 接近原生的体验
3. 能够保证安全可控

开发门槛低

HTML + CSS + JavaSript

接近原生的体验

资源加载 + 渲染 + 页面切换

资源加载：我们可以通过资源离线化解决

页面切换：我们可以在每次切换页面之前保留之前的页面，使用多 WebView 结构

安全管控

使用独立 JS 沙箱（JSCore），把 DOM 的 api 都去掉。

不操作 DOM 如何渲染页面？

Data -> 根据数据处理 DOM -> 页面

在上面的结构中，我们只需要关心数据流，不需要具体操作 DOM，就可以根据数据来渲染页面。

小程序结构图

基于目标，解决相应的问题，微信设计实现了下面小程序的架构。

针对渲染问题，在浏览器中，JS 频繁操作的时候会让动画卡顿，因为它们在同一个进程中，上面的结构，把渲染和 JS 分离就解决了这个问题。

这样的结构决定着小程序的性能问题在于数据传递。