这是我参与「第四届青训营」笔记创作活动的第7天，本篇笔记主要为小程序相关的知识，包括小程序的发展历程，技术解析，与 web 的语法差异，以及跨端框架的介绍。

小程序技术全解

01. 发展历程

02. 业务价值

与 WEB 的区别

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

03. 技术解析

小程序原理

第三方开发应用最简单最方便的方式 WebView + JSBridge

• WebView ：app 内置的浏览器
• JSBridge ：调用一些系统 api，如打开相机。是 JavaScript 代码 与 Native 代码 相互沟通调用的桥梁
  • 代码注入
  • url 拦截

这种方式的问题：

• 无网络的情况下体验不佳
• 网页切换体验不佳
• 如何管控保证安全

技术目标：

• 开发门槛低
  • HTML + JS + CSS
• 接近原生的使用体验
  • 资源加载 + 渲染 + 页面切换
  • 每个页面使用一个 webview 来承接。 切换页面即切换 webview。
  • 
  • 切换页面时不销毁前一个页面。尽可能减少切换页面时重新渲染页面的重载。
• 能够保证安全可控
  • 独立 JavaScript 沙箱，只能做 JS 的逻辑，不能做 DOM 的操作。
    • 问题：不操作 DOM 如何控制页面渲染？
    • 开发者只能修改数据，使用模板 + 数据驱动的框架。
    • 

在浏览器中，当 JavaScript 操作频繁的时候我们的动画就会卡顿，因为他们是在同一进程中的，我们这种结构将 JavaScript 和渲染分离顺带解决了这个问题。

小程序的性能问题主要由数据传输引起。 需要进行分段传输等优化手段。

小程序语法

在 CSS 的基础上多了一个 rpx 单位，
将屏幕的宽度分为 750 份，这是以 iPhone6 的 375px 为标准的。
因此，1rpx 就是 0.5px 可以做出比 css 中更细的线。

JSON 用来配置一些在 JavaScript 无法做到的事情，如小程序的背景颜色，路由。

04. 相关拓展

跨端框架介绍：

目前的小程序跨端框架主要为了解决两个问题：

• 复杂应用构建
• 一次开发可以跨多端

跨端框架原理

跨端框架主要有两种实现方式：

• 编译时构建：通过 AST 语法树

  • 语法分析 + 重新组合
  • 无法完全抹平差异，只能限制框架的语法，与初衷背离
  • 

• 运行时构建：

  • 虚拟 DOM 通过一个对象生成实际的 DOM
  • template

通过框架编写逻辑层运行生成一个 虚拟 DOM 树，

在渲染层中根据 DOM 树的结构，组合出 template，生成实际要渲染的元素树。

在一些场景下相比小程序原生语法性能会更差。

• 比如长列表
• 不过现在有很多优化手段：可以采用混合编程、虚拟列表