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

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

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

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

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

完成第三步的主要工具:

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

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

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

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

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

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

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

相关推荐
光影少年3 小时前
rn如何和原生进行通信,是单线程还是多线程,通信方式都有哪些
前端·react native·react.js·taro
用户47949283569158 小时前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
哈__9 小时前
React Native 鸿蒙跨平台开发:PixelRatio 实现鸿蒙端图片的高清显示
javascript·react native·react.js
wszy18099 小时前
外部链接跳转:从 App 打开浏览器的正确姿势
java·javascript·react native·react.js·harmonyos
wordbaby9 小时前
TanStack Router 实战:如何构建经典的“左侧菜单 + 右侧内容”后台布局
前端·react.js
计算机程序设计小李同学10 小时前
婚纱摄影集成管理系统小程序
java·vue.js·spring boot·后端·微信小程序·小程序
爱吃奶酪的松鼠丶10 小时前
React长列表,性能优化。关于循环遍历的时候,key是用对象数据中的ID还是用索引
javascript·react.js·性能优化
幽络源小助理14 小时前
SpringBoot+小程序高校素拓分管理系统源码 – 幽络源免费分享
spring boot·后端·小程序
Mr -老鬼14 小时前
移动端跨平台适配技术框架:从发展到展望
android·ios·小程序·uni-app