了解小程序的启动流程（上）

前言：

小程序的运行环境大体可以分为三类，

第一类是iOS端、Mac微信端，

第二类是Android端 PC微信端，

第三类就是我们开发者经常使用的微信开发者工具模拟器端。

三类的运行环境，虽然它们在底层是基于不同的技术实现的，但是它们的启动流程大体上是相似的，小程序的优化主要是指从小程序开始启动到首页完全渲染显示，也就是Page.onReady事件派发，这个过程之间的一个优化。

启动流程：

第一步，环境准备

1. 小程序运行进程及运行环境的准备

        这里面具体又包括拉取小程序基本信息，包括代码包版本 地址等信息，另外还有Native小程序进程和微信基本模块的一个初始化。例如在Android环境里面有Activity活动组件的一个初始化

2. 代码包下载、校验及初始化

3. 视图层系统组件、webView 容器和原生的初始化

4. 逻辑层JS引擎初始化及域创建

第二部，代码注入

1.框架及第三方基础代码的初始化

    这一步主要包含两大部分：第一部分是框架及第三方基础代码的一个初始化，

    这里面又分为三个小部分

        1. 第一部分是小程序基础库的注入；

        2. 第二小部分是扩展库，例如我们在配置文件里面通过使用useExtendedLib引入的WeUI以及kbone这样的一个类库的初始化；

        3. 第三小部分是插件、自定义组件 扩展库代码的一个注入。

2.开发者代码注入

        1. 第一个小部分是开发者逻辑层代码的一个注入，这里会派发小程序里面的App.onLaunch还有App.onShow这些事件的一个派发，这些事件都是在这个阶段进行派发的；

        2. 第二小部分是开发者视图层代码的一个注入，包括公共代码以及页面代码的一个注入。

第三步，首屏渲染

1. 逻辑层页面初始化，这个时间点是 initDataSendTime,会Page.onLoad事件派发

2. 视图层时间点走到viewLayerReaderStarTime, 会有Page.onShow事件派发

3. 开发者代码从后端拉取数据，准备data数据（非必须）

4. 页面渲染

5. 视图层时间点走到viewLaerPeaderEndTime,会有Page.onReady事件派发标志着首屏渲染完成

说明一：小程序采用逻辑层、视图层双线程运行机制，Native的工作准备它是先于这两个线程开始之前开始的，基础的执行环境准备好以后，逻辑层与视图层两个线程才开始工作，并且两个线程几乎是并发执行的。在视图层与逻辑层它代码完全注入以后，这个时间点它会对齐以后才会进入下一个阶段，也就是首屏渲染这个阶段的开始执行。

说明二：这些节点它并不是每一次小程序启动时都会经历的，有些会有，有些不会有。微信有运行环境预加载机制，如果小程序在启动时命中了预加载的环境，有关准备运行环境的节点就可以省略掉，这一部分的启动时间也可以节省了。

说明三：（Android & iOS）：在Android上小程序启动的时候，微信它开启了新线程，在iOS上则没有 iOS上小程序它在启动的时候，它会复用与微信相同的一个进程，因此Android上有小程序进程与Activity初始化这样的一个节点，在iOS上则没有，再加上iOS的设备它普遍的性能是高于Android设备的，所以这使得iOS的设备的启动的效率普遍就高于Android。

    小程序的启动方式（冷启动 & 热启动）：

冷启动：

        如果小程序在用户设备上是第一次打开或者是销毁后再次打开，这个时候的启动就是冷启动。

热启动：

        热启动是相对冷启动而言的，热启动是小程序启动的一种优化机制，小程序进入后台30分钟以内再次进入前台，可以直接从后台状态然后恢复到前台

App周期函数：

        1. onLaunch, 它是监听小程序初始化一个事件

        2. onShow, 监听小程序启动或者切前台这样一个事件

        3. onHide监听小程序切后台这样的一个事件

Page周期函数：

        1. onLoad它监听页面加载；

        2. onShow监听页面显示；

        3. onReady监听页面初次渲染完成；

        4. onHide监听页面隐藏；

        5. onUnload监听页面卸载

说明：App.onShow事件和Page.onShow事件是视图界面开始显示时派发的，它们会重复派发与启动流程优化密切相关的一次性事件，主要有App.onLaunch Page.onLoad和Page.onReady这三个事件，在这三个事件节点恰当的安排执行合适的逻辑代码是优化的重要技巧一。

启动中有哪些节点可以优化：

       1.  环境准备阶段，拉取小程序基本信息阶段  (开发者不能做)

                微信对用户设备上经常使用的小程序它会有轮询机制，在轮询的时候会自动拉取小程序的一个基本信息

        2. 紧跟小程序基础库更新 （微信基础库预加载，用新版本库提高命中率，也做不了啥）

        3.  代码注入阶段：

                代码注入阶段，逻辑层与视图层代码都需要注入，两个线程的代码都注入完成以后首屏渲染流程才能开始，Page.onLoad事件才能触发。我们可以想方设法减少代码的一个注入量和复杂度以期减少启动时间，小程序在这方面有分包、有独立分包、有按需注入、有用时加载和占位组件等等这些特性，这些都是这一阶段的一些优化技巧。

        4. 合适的生命周期函数节点

                Page.onReady事件派发于首屏渲染完成的时候，如果我们要从后端拉取数据并在首页上进行渲染，在这个事件函数里面执行拉取操作，势必会造成二次渲染的CPU资源浪费，但如果我们在Page.onLaunch这个事件触发的时候就开始数据拉取，又可能会阻塞小程序正常的一个启动流程，在这种情况下我们要怎么去做？我们可以使用异步转同步的编程范式以及使用并发复合命令，在多个文件里边对齐这个代码的执行点，这样的话就显得尤为重要了。具体的优化办法，稍后我们在课程里面会详细讲解。

        5. Page.onReady事件派发、首屏渲染完成阶段

                从Page.onLoad事件派发页面开始渲染到Page.onReady这个事件派发首屏渲染完成，这中间涉及到的动态数据加载，其加载的数据量有多少、网络请求所需的时间有多少还有图片等静态资源它加载所需要的时间有多少，都会影响首屏渲染的一个效率，这个阶段使用骨架屏技巧包括压缩图片、提高服务器接口响应效率和数据传输效率等等，这些都可以优化首屏渲染的一个用户体验。

        6. 数据预拉取和周期性更新机制

                针对小程序里面用到的一些数据，微信还提供了数据预加载周期性更新机制，不需要开发者自己去拉取微信就可以代为拉取，小程序在启动的时候，直接取用这些已经加载好的数据就可以了，这也是优化启动流程的一个技巧之一。

        7. 低端机首次渲染需要较长事件的情况下

                初始渲染缓存机制，启用初始渲染缓存可以使视图层不需要等待逻辑层代码初始化完毕就可以直接提前将这个页面初始化的数据渲染的结果展示给用户。