小程序运行流程
收藏小程序启动与运行
宿主 App 会为小程序展示一个固定的启动界面（包含小程序的图标、名称和加载提示图标）。
此时宿主 App 会在背后依次完成：下载小程序代码包 -> 加载小程序代码包 -> 初始化小程序首页。
用户点击打开小程序时
宿主 App 会判断本地是否有缓存的小程序代码包。
- •本地没有缓存的小程序代码包：下载小程序代码包 -> 加载小程序代码包。
- •本地有缓存的小程序代码包：直接加载小程序代码包。
小程序初始化
初始化小程序分为逻辑线程和视图线程两个线程的初始化，在小程序包准备好之后，两个线程会并行工作。
- •逻辑线程：运行逻辑层代码，也就是 js 代码。
- •视图线程：用于展示页面，也就是 ttml 代码对应的页面结构。
视图层加载流程
- 1.加载基础库（基础库会提供小程序视图层的运行环境，比如 view、text 等各种内置组件）。
- 2.加载 App.ttss 的编译产物。
- 3.加载入口页面对应的 sjs / ttml / ttss 的编译产物。
- 4.加载完毕后，等待逻辑层的 init data。
逻辑层加载流程
- 1.加载基础库（基础库会提供小程序运行时所需要的基础环境，比如 App、Page 等方法和 tt.getStorage 等 API）。
- 2.创建 App。
- a.加载开发者的 App.js，创建 App 实例。
- b.依次触发 App.onLaunch 和 App.onShow 两个生命周期。
创建 Page
- 1.逻辑层加载开发者的 page.js，创建 Page 实例，将 init data 发送至视图层。
- 2.视图层收到 init data 后，开始渲染。
- 3.与此同时逻辑层依次执行 Page 的 onLoad 和 onShow 两个生命周期。
- 4.视图层渲染完毕后会通知逻辑层，逻辑层收到通知，触发 onReady 生命周期。
- 5.页面完成初次渲染，得到 FP。
setData 运行原理
通常开发者会在 onload 中动态获取数据，比如通过 tt.request ，或者 tt.getStorage 等，然后再 setData。
- 1.逻辑层会发送经过 diff 后的 data 到视图层.
- 2.视图层收到 data 之后会触发页面的重新渲染，得到 FMP.
- 3.渲染完毕后会通知逻辑层页面渲染完成.
- 4.逻辑层收到通知后会触发 setData callback.
开发者可以通过 setData 触发页面的更新，更新流程和 onload 中的 setData 流程类似。
总结
介绍完小程序启动时和运行时的流程，你可以围绕小程序的启动流程和运行流程进行相对应优化。
