微信的小程序设计原理 第1篇
iPhone5
1rpx =
1px =
iPhone6
1rpx =
1px = 2rpx
iPhone6 Plus
1rpx =
1px =
如上我们定义的，会被编译成js，注入webview
我们把编译后的js分成三部分，展开分析。
第一部分用于获取一套基本设备信息，包含设备高度、设备宽度、物理像素与CSS像素比例、设备方向。
第二部分：转化rpx
核心就是：下面两句，做了一个精度收拢
微信的小程序设计原理 第2篇
配合整体架构图来看一下生命周期。
小程序中不像单页面应用，采用多个webview类似多页。
无论逻辑层还是视图层，这个行为都会被发送到Native层，有Native层统一控制路由。对于webview的添加或删除都会有一个载体来维护，这就是路由栈。
上图中，逻辑层中发出打开页面行为到Native层，Native层收到行为后通过pageFrame快速创建webview，并且推入路由栈。页面创建完后，底层基础库会立刻执行初始化操作，初始化完毕后会发送一个信号通知Native页面已经创建并初始化完毕，随后Native层发送信号到逻辑层中。
通知的目的有两个：
需要通知开发者页面已经创建成功。
在沙箱中创建新页面的“根组件”，并正式开启新页面的生命周期与渲染的流程。
程序的性能又可以分为「启动性能」和「运行时性能」两个主题。「启动性能」让用户能够更快的打开并看到小程序的内容，「运行时性能」保障用户能够流畅的使用小程序的功能。
微信客户端需要从微信后台获取小程序的头像、昵称、版本、配置、权限等基本信息，这些信息会在本地缓存，并通过一定的机制进行更新。
为了尽可能的降低运行环境准备对启动耗时的影响，微信客户端会根据用户的使用场景和设备资源的使用情况，依照一定策略在小程序启动前对运行环境进行部分地预加载，以降低启动耗时。
但不一定命中\
从微信后台获取代码包地址，从 CDN 下载小程序代码包
小程序代码包会在本地缓存，并通过更新机制进行更新。
同步下载/异步下载 强制更新/静默更新
为例降低代码包下载的耗时，微信做的一些优化
小程序启动时需要从代码包内读取小程序的配置和代码，并注入到 JavaScript 引擎中。
微信客户端会使用 V8 引擎的 Code Caching 技术对代码编译结果进行缓存，降低非首次注入时的编译耗时
code cache
V8 会把编译和解析的结果缓存下来，等到下次遇到相同的文件，直接跳过这个过程，把直接缓存好的数据拿来使用
控制频率，范围，内容
控制图片大小
我们在对小程序的架构设计时的要求只有一个，就是要快，包括要渲染快、加载快等。当用户点开某个小程序时，我们期望体验到的是只有很短暂的加载界面，在一个过渡动画之后可以马上看到小程序的主界面。
现在已知的小程序有 微信，支付宝，抖音，qq，虎牙，斗鱼，饿了么，百度，京东等等
已知的这些都是超级app，对用户来说，一般手机只按照常用和必要的app，对于一般的app其实很难推广。开发h5又天生需要借助平台给予流量，体验无论怎么优化，仍旧比不上原生。但是小程序在可以借助平台流量的同时，有较好的用户体验。
目前已经出了三方框架，FinClip 把小程序搬进app。
微信的小程序设计原理 第3篇
在视图层内，每个页面都是一个webiew，当小程序启动时只有首页一个webview
执行新开一个页面的时候，就会创建一个新的webview并插入到视图层
则为销毁webview
小程序每个视图层页面内容都是通过模板来生成的。
这样在后续新打开页面时，都会走缓存的pageframe的内容，避免重复生成，快速打开一个新页面。
下图代码中可以看到dom加载完毕之后，触发alert 通知
网页编程一般采用的是HTML + CSS + JS的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。
小程序自行搭建了组件组织框架Exparser框架
微信的小程序设计原理 第4篇
我从2018年接触学习前端时，曾仿写过一个性格评测类小程序demo，后来实习期间，完成了部门首个真正意义上小程序。做毕业设计时，结合微信小程序云开发能力，做了一个问答小程序（类似百度知道，360问答）。后来，做过一个大学信息资讯类小程序。正式工作之后，做过的小程序就很多了，借款类小程序，购物类小程序，消费类小程序，导流类小程序。
有招聘需求，现在部分团队会有专门招聘小程序开发工程师，toC的产品招聘前端一般也会要求掌握微信小程序，有相关小程序开发经验。
小程序与传统web单线程架构相比，是双线程架构。
渲染层和逻辑层由两个线程管理，逻辑层采用JSCore 执行 js代码，渲染层使用 webview 进行渲染。小程序有多个页面，所以渲染层存在多个webview。
两个线程之间由Native 层之间统一处理，无论是线程之间的通信，还是数据的传递，网络请求都是由Native层做转发。
此处提到的小程序都特指微信小程序
WXML可以先转成JS对象，然后再渲染出真正的Dom树，回到“Hello World”那个例子，我们可以看到转换的过程
通过setData把msg数据从“Hello World”变成“Goodbye”，产生的JS对象对应的节点就会发生变化，此时可以对比前后两个JS对象得到变化的部分，然后把这个差异应用到原来的Dom树上，从而达到更新UI的目的，这就是“数据驱动”。
这一点和vue其实是一致的
既然小程序是基于双线程模型，那就意味着任何数据传递都是线程间的通信，也就是都会有一定的延时。
微信的小程序设计原理 第5篇
小程序采用多个webview渲染，更加接近原生App的用户体验。
如果为单页面应用，单独打开一个页面，需要先卸载当前页面结构，并重新渲染。
多页面应用，新页面直接滑动出来并且覆盖在旧页面上即可。这样用户体验非常好。
页面得载入是通过创建并插入webview 来实现的。
微信小程序做了限制，在微信小程序中打开的页面不能超过10个，达到10个页面后，就不能再打开新的页面。