1) 用户首次访问或小程序同步更新时,命中环境预加载 2) 用户非首次访问,命中环境预加载 3) 用户非首次访问,未命中环境预加载
编辑切换为居中
添加图片注释,不超过 140 字(可选)
编辑切换为居中
添加图片注释,不超过 140 字(可选)
1) 资源准备
2) 小程序代码注入(逻辑层)
按顺序将小程序的配置和代码、插件或扩展库、开发者代码注入到 JavaScript 引擎中
3) 小程序代码注入(视图层)
WXSS 和 WXML 会编译成 JavaScript 代码注入到视图层
4) 首页(初次)渲染
在逻辑层小程序代码注入完成后,小程序框架会根据用户访问的页面,进行页面组件树初始化,生成初始数据发送到视图层
5) 首屏内容展示
如果首页的主体内容依赖网络请求(例如 wx.request)等异步来源、需要等待网络请求异步返回后,调用 setData 进行页面更新,才能呈现真正的页面 详情 小程序启动流程介绍 | 微信开放文档
代码中做统计上报, 可以依赖于getPerformance接口, 即采用appLaunch耗时, 包括代码包下载、js代码注入/执行、首页绘制、首页渲染等时间, 计算方式:
1) 起点为用户点击小程序图标,或小程序被拉起的时间;
2) 终点为首个页面 firstRender 结束时间。
安卓 | ios | |
---|---|---|
需要下载或更新时 | 3.7s | 1.8s |
使用本地代码包时 | 2.6s | 0.9s |
编辑切换为居中
添加图片注释,不超过 140 字(可选)
页面切换时需要下载分包,并在逻辑层注入执行分包内的 JS 代码
每个页面都是由独立的 WebView 渲染的,因此页面切换时需要一个新的 WebView 环境
完成分包加载和 WebView 创建后,客户端会向基础库派发路由事件, 基础库收到事件后会进行逻辑层的页面初始化
页面切换的目标页面不存在时,会触发页面的首次渲染 代码中做统计上报, 可以依赖于getPerformance接口统计数据, 即采用route耗时, 影响用户操作的连贯性和流畅度,是小程序运行时性能的一个重要组成部分, 包括分包加载、路由事件、页面渲染等时间, 计算方式:
1) 起点为触发页面切换;
2) 终点为页面切换动画完成;
代码中自己未做统计上报, 可以依赖于getPerformance接口统计数据, 即采用evaluateScript耗时, 逻辑层 JS 代码注入(含编译和执行)耗时
直观感受, 用户能完全看到首屏内容的加载时间
可以采用小程序原生页面首次渲染耗时计算, 依赖于getPerformance接口统计数据, 即采用performance.firstRender, 因为这个统计是在页面内容完整呈现且某时间段内不再改变才触发的, 所以如果页面做了本地数据缓存, 此数据不一定就是用户首次看到页面的时间
详情渲染性能优化 | 微信开放文档、资源加载优化 | 微信开放文档
不建议采用如下统计方式:
代码里自己计算, 首页配置获取完成时刻 - 首页组件onShow时刻, 误差比较大, 分析原因如下:
建议采用如下统计方式:
使用小程序自带的页面首次渲染耗时统计, 起点为逻辑层收到路由事件, 终点为页面 onReady其时间包括:
通过发送一个空请求, 来测算当前网络环境下的响应时长. 非websocket的请求, 整个请求链路为 DNS -> TCP Connect -> SSL -> request -> response; 可以借助于小程序原生request调试信息计算, 可以在app.onLaunch首次建立请求的时候进行计算, 因为后续请求由于存在链路复用的情况, 在页面级的测速会存在耗时较低的情况
不建议统计方式:
代码里自己计算, 请求结束时刻 - 请求开始时刻, 有一定误差, 分析原因如下:
建议统计方式:
使用小程序request自带的请求profile信息, 用 响应接受完成时刻 - DNS域名查询开始时刻, 其时间包括:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。