小程序初始化加载时间优化 步骤思考与总结

回想起来，正确的小程序初始加载时间优化步骤应该为：

一、梳理小程序初始化的步骤，以用户点击小程序为开始（尽可能靠近），以页面渲染出来的时刻为结束—也就是用户感知到的时间。

二、页面渲染时，所需要的数据是从哪里拿的，又是怎么存进去的？

三、搞清上述过程中，各网络请求的顺序和关系。以时间轴的形式记录各个事件的开始结束时刻 以及 各主要耗时的消耗时间段。

        完成第三步的主要工具：

        ①找到尽可能早的时间点，定义earlistTime（只是自己能找到的 最早的时刻），后面定位事件的时刻时，打印 Date.now() - earliestTime 作为事件的时刻。

        好处1：可以大概知道从小程序开始加载 到 这个事件发生需要多长时间，以及这个事件的开始与结束时间；

        好处2：清晰地展示各事件的先后关系。

        好处3：如果一个事件结束时刻和另外一个事件开始时刻相差 很长一段空白时刻，说明自己的初始化流程梳理还存在纰漏，可以提示自己完善这一过程。也可以用来排查其它非代码问题，比如我在这次优化中遇到一个插件相关的问题 阻塞了首页的加载。

        ②console.time、console.timeEnd 统计一个事件的阻塞时间

四、通过时间轴记录的信息，以从短到长的耗时顺序，分析各个事件的重要程序，找到页面渲染必需的事件，把非必需的事件后移。

        如果是不熟悉的项目，前三步是最耗时且必不可少的，感觉有可能耗时就多加时间戳打印，不可心急。思路理清楚之后，最后一步很快就能结束。