微信小程序性能指标

微信小程序性能指标

WEB 性能指标

Google PSI 通过 “首次显示内容所需时间(FCP)”,“首次输入延迟(FID)”,“最大内容渲染:显示最大内容元素所需时间(LCP)”和 “累计布局偏移:反应网站的视觉稳定度 ”(CLS)度量标准数据衡量移动和台式设备上页面的性能。

微信官方性能指标

  1. 首屏时间: 不超过 5 秒
  2. 渲染时间: 不超过 500ms
  3. 脚本执行时间: 一个执行周期内脚本运行时间不超过 1 秒
  4. setData调用频率: 每秒调用setData的次数不超过 20 次
  5. setData数据大小: 数据在JSON.stringify后不超过 256KB
  6. WXML节点数: 少于 1000 个,节点树深度少于 30 层,子节点数不大于 60 个
  7. 图片缓存: 所有图片均开启 HTTP 缓存
  8. 图片大小: 图片宽高乘积 <= 实际显示宽高乘积 * (设备像素比 ^ 2)
  9. 请求耗时: 所有网络请求都在 1 秒内返回结果
  10. 网络请求数: 通过wx.request发起的耗时超过 300ms 的请求并发数不超过 10 个
  11. 图片请求数: 同域名耗时超过 100ms 的图片请求并发数不超过 20 个
  12. 网络请求缓存: 3 分钟以内同一个url请求不出现两次回包大于 128KB 且一模一样的内容

获取小程序性能相关信息

  • route: 路由性能
  • appLaunch: 小程序启动耗时
  • firstRender: 页面首次渲染耗时
  • evaluateScript: 注入脚本耗时
  • request: 接口耗时(api、params、duration)
  • onMemoryWarningLevel: 内存警告等级
    5:TRIM_MEMORY_RUNNING_MODERATE
    10:TRIM_MEMORY_RUNNING_LOW
    15:TRIM_MEMORY_RUNNING_CRITICAL
  • path: 路径
  • systeminfo: 系统信息
  • network: 网络类型
  • userinfo: 用户信息
  • setData: 耗时/数量
  • wxApiDuration: 微信接口耗时
  • version: 基础库版本

体验评分标准

  • 首屏渲染时间: <5s
  • 平均请求耗时: <300ms
  • request并发: <10
  • 图片请求并发: <10
  • setData 频率: <20/s
  • 内存警告:无
  • 脚本报错数量:无

设计思路

重写 App、Page、wx、request、Component 对象;获取 wx api 耗时、路由信息、内存性能警告、基础库 2.11.3 以上支持(获取路由性能、小程序启动耗时、页面首次渲染耗时、注入脚本耗时)。目的在于更细致的对页面关键节点作测速统计,做针对性优化,配合小程序后台/工具的宏观测试。服务端可通过 operation.getPerformance 获取:1(启动总耗时), 2(下载耗时),3(初次渲染耗时)

参考文档

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/performance/wx.getPerformance.html
https://developers.weixin.qq.com/miniprogram/dev/framework/audits/scoring.html
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/operation/operation.getPerformance.html

Read more

Flutter入门指南

Flutter入门指南

Flutter 是一个由 Google 开发的开源移动应用开发框架。它允许开发者使用一套代码同时构建 iOS 和 Android 应用,并且提供了丰富的 UI 组件和高效的开发工具,使得开发者能够快速构建出高性能的跨平台应用。 一、Flutter 的实现原理 Flutter 的核心在于其自带的高性能渲染引擎 Skia。不同于其他框架依赖于原生的 UI 组件,Flutter 直接通过 Skia 渲染引擎将所有组件绘制到屏幕上。这种方式保证了跨平台应用在 iOS 和 Android 上的表现完全一致。 1.1 结构概览 Flutter 的架构分为三层: 1. Framework(框架层): 这部分主要由 Dart 编写,提供了 Flutter 的各种 UI 组件(Widget)、手势检测、渲染层以及动画等。

By Lewis
Certbot Let's Encrypt 证书自动续期

Certbot Let's Encrypt 证书自动续期

安装 Certbot yum install epel-release -y yum install certbot -y certbot certonly //生成证书 certbot renew //续期 certbot certificates //查看证书 域名验证插件 https://github.com/ywdblog/certbot-letencrypt-wildcardcertificates-alydns-au 下载 $ git clone https://github.com/ywdblog/certbot-letencrypt-wildcardcertificates-alydns-au $ cd certbot-letencrypt-wildcardcertificates-alydns-au $ chmod 0777 au.sh 配置 DNS API 密钥: 这个 API 密钥什么意思呢?由于需要通过 API 操作阿里云 DNS,

By Lewis