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

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

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

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

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

完成第三步的主要工具:

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

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

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

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

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

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

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

相关推荐
weibkreuz3 小时前
React的基本使用@2
前端·javascript·react.js
Hao_Harrision4 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·react.js·typescript·tailwindcss·vite7
禾高网络4 小时前
互联网医院系统,互联网医院系统核心功能及技术
java·大数据·人工智能·小程序
小鱼小鱼干4 小时前
【Gemini简直无敌了】掌间星河:通过MediaPipe实现手势控制粒子
react.js·gemini
San30.4 小时前
深度驱动:React Hooks 核心之 `useState` 与 `useEffect` 实战详解
前端·javascript·react.js
huohuopro5 小时前
LangChain | LangGraph V1教程 #3 从路由器到ReAct架构
前端·react.js·langchain
打小就很皮...5 小时前
React 实现富文本(使用篇&Next.js)
前端·react.js·富文本·next.js
开发者小天7 小时前
react的拖拽组件库dnd-kit
前端·react.js·前端框架
2501_915918417 小时前
TCP 抓包分析在复杂网络问题中的作用,从连接和数据流层面理解系统异常行为
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
全栈前端老曹7 小时前
【ReactNative】核心组件与 JSX 语法
前端·javascript·react native·react.js·跨平台·jsx·移动端开发