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

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

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

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

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

完成第三步的主要工具:

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

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

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

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

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

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

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

相关推荐
超级新零售3 小时前
服装订货会数字化:商品版本、订单状态与后续配发数据如何衔接?
大数据·小程序·企业微信
濮水大叔4 小时前
React/Next.js 生态里,有没有 CabloyJS 这样的全栈框架?
react.js·全栈·next.js
前端小D5 小时前
React Native Android 项目搭建
android·react native·react.js
xiezhr7 小时前
我用workBuddy开发了自己的第一个小程序并成功上线了
ai·小程序·ai agent·workbuddy
sinat_2676119116 小时前
用 AI 开发微信小程序(八):一个极简收纳工具的开发复盘
微信小程序·小程序
李纲明1 天前
微信小程序真机预览白屏或 request 失败:先核 request 合法域名与 TLS,再查体验版与本地缓存
缓存·微信小程序·小程序·小程序开发·devdiy·真机预览·合法域名
klfdgl1 天前
线上商城小程序投入测算,有成熟开发经验服务商的长期收益对比
小程序
Highcharts.js1 天前
Highcharts 集成到 React 或 Vue 项目中时,如何高效地使用 TypeScript技巧?
vue.js·人工智能·react.js·typescript·前端框架·highcharts
一木 之林2 天前
Dify学习笔记 03 · RAG检索增强生成:三代范式、评估与落地(第40-45、55-56集)
笔记·小程序·交互·dify
赵小哥要冲啦2 天前
社区邻里互助小程序从 0 到 1 复盘:需求拆解与信任机制设计
java·小程序·需求分析