原生小程序开发性能优化指南

性能优化指南

1.骨架屏

  • 业务可以在数据加载完成之前用骨架屏幕来占位,提升体验。

2.包大小优化

  • 减小包中静态资源,例如图片文件,可将图片进行压缩降低文件体积。
  • 无用文件、函数、样式剔除。
  • 除了部分用于容错的图片必须放在代码包(譬如网络异常提示)之外,建议开发者把图片、视频等静态资源都放在 CDN 上。(Base64 格式本质上是长字符串,和 CDN 地址比起来也会更占空间。)
  • 图片压缩: 推荐 tinypng,比工具更好用的图片压缩。 地址
注意:
  • 若项目中有多个页面,只打包一个页面,图片资源依然会被打进包内。
  • 若页面在usingComponents配置引入自定义组件但是未使用,会被打进包内。
  • 检查TYML中的import引用其他模板文件、TYSS中的@import其他样式文件、JS 中引用的其他模块,是否有无用但是未删除依赖关系的?
  • ray 的项目,可以通过 -a 或者 --analyze 开启打包分析,协助开发者进行优化工作。

3.渐进加载

  • 页面启动环节,尽快加载重要内容,然后在加载其他内容,可分阶段加载,尽最大可能降低用户等待时间。
  • image图片可开启lazy-load,使用懒加载。

4.启用本地缓存

  • 智能小程序提供了读写本地缓存的接口。有些页面数据变化不频繁,可考虑放入本地缓存,打开优先加载缓存数据,拉到最新数据比对后有变化再去更新,以此提升用户体验。
注意:
  • 并非所有场景都适合缓存策略,譬如对数据即时性要求非常高的场景(如抢购入口)来说,展示老数据可能会引发一些问题。
  • 数据隔离:智能小程序目前会默认按照 uid 和 小程序ID 两个维度,对缓存空间进行隔离,业务可自行根据业务需求根据 countryCode、家庭 ID 等维度进行再隔离,避免数据误展示。

5.【重要】运行时优化(setData、事件)

  • 上述表格中可以看出,在小程序的双线程通信模式,数据量在一定程度上,会指数级上升,因此运行时的优化最主要的原则就是减少通信频率,降低通信数据量
  • 业务开发阶段,开发者可以控制 setData 的频率,尽可能合并数据,减少调用次数。频次推荐为 1s 不超过 20 次,在处理一些频繁触发的事件,比如滚动或者 touchmove 时添加截流方案。
  • Touch 事件,使用前要思考是否必须要绑定该事件到逻辑层触发,是否可以在 SJS 中处理该事件
  • 开发者应该尽量减小调用 setData 的数据量,来提升通信效率。如一些逻辑层的标记型变量,预渲染无关的可直接挂在 this 变量下。
  • 在调用 渲染脚本(rjs) 的方法时也会走逻辑层到视图层的通信,因此调用 rjs 的方法的时候和 setData 一样也应传递最小变更数据。
  • setData局部变更数据。
// 局部更新数据
this.setData({
  'a.b.c': 1,
});
  • 去掉不必要的事件绑定:当用户事件(如 Click、Touch 事件等)被触发时,视图层会把事件信息反馈给逻辑层,这也是一个线程间通信的过程。
  • 组件节点支持附加dataset, 应避免在自定义数据中设置太多数据。

6.【重要】SJS 和 RJS

  • 将一些视图层需要计算的能力放在 SJS 中操作。
    • SJS运行在视图层。
    • SJS 可以处理视图层绑定的事件且可以获取当前所在实例的部分能力。查看详情
    • SJS并不是完全的JavaScript,仅具有部分Safe的能力。
    • SJS处理事件、工具函数,无需通信。
  • 渲染脚本(RJS)
    • 可用于处理高频的绘图需求,可以提高视图的动画渲染性能,主要应用场景 canvas 图表渲染,webGL 图形渲染等。

7.销毁持久化内存

  • 由于逻辑层是在多页面共享,因此如计时器等逻辑在页面退出后,仍会执行。正确的做法是,在页面 onHide 的时候手动把定时器清理掉,有必要时再在 onShow 阶段恢复定时器。

8.其他

  • vConsole:是挂载到视图层的调试工具,逻辑层的日志会通过通道发到视图层,日志打印频繁可能会阻塞通道,遇到性能要求较高的页面调试,去掉 vConsole 调试工具,减少通道占用。
  • 视频:由于视频组件比较占用内存,在列表中多个出现,建议用 cover 图占位,当用户点击时候再去加载 video 组件
  • 长列表:扩展组件提供长列表组件,支持虚拟滚动遇到长列表场景可使用该长列表组件减少页面节点渲染数量提升性能。
  • 控制页面复杂度:如节点数量,事件绑定数量,不要在一个页面做太多的业务逻辑。

9.总结性能指标

  • 首屏时间不超过 5 秒。
  • 渲染时间不超过 500ms。
  • 每秒调用 setData 的次数不超过 20 次。
  • setData 的数据在 JSON.stringify 后不超过 256kb。
  • 页面 TYML 节点少于 1000 个,节点树深度少于 30 层,子节点数不大于 60 个。
  • 所有网络请求都在 1 秒内返回结果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/525962.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

烧坏两块单片机,不知道原因?

没有看你的原理图,以下是造成烧毁芯片的几个环节: 1. 最大的可能性是你的单片机电机控制输出与电机驱动电路没有隔离。 我的经验,使用STM32控制电机,无论是直流电机脉宽调制,还是步进电机控制,控制电路与…

耐压40V、输出电压1.23-37V可调,适用于工控主板、TV板卡、安卓主板、车载功放电源等产品方案应用。

一、应用领域 适用于工控主板、TV板卡、安卓主板、车载功放电源等产品方案应用。 二、功能介绍 D1509是一款输入耐压40V、输出电压1.23-37V可调、输出电流最大2.0A的高效率、高精度DC-DC芯片,其输出电压有固定3.3V、5.0V和12.0V的版本,可以为客户省去…

前端自动化测试-Jest

前端自动化测试 Jest官网:https://jestjs.io 安装方式 npm install --save-dev jest yarn add --dev jest cnpm add --save-dev jest 使用方法 所有以 .test.js 结尾的都是测试文件 基础用法示例 num.js: export function getSum (a, b) {return a b…

go语言实现无头单向链表

什么是无头单向链表 无头单向链表是一种线性数据结构,它的每个元素都是一个节点,每个节点都有一个指向下一个节点的指针。"无头"意味着这个链表没有一个特殊的头节点,链表的第一个节点就是链表的头。 优点: 动态大小&…

2024.4.7周报

摘要 在本周阅读的文献中,提出了基于Transformer的GAN模型,GAN的生成器和鉴别器,都是基于Transformer的编码器架构构建的,通过处理图像的方式处理时间序列数据作为该模型的输入。该模型能够生成各种长度的多维时间序列数据&#…

【完全背包求方案数问题】AcWing1023.买书(赋练习题目)

【题目链接】活动 - AcWing 输入样例1&#xff1a; 20输出样例1&#xff1a; 2输入样例2&#xff1a; 15输出样例2&#xff1a; 0输入样例3&#xff1a; 0输出样例3&#xff1a; 1 【代码】 //1023.买书——完全背包问题#include<bits/stdc.h>using namespace st…

Git - 如何重置或更改 Git SSH 密钥的密码?

Git 使用 ssh 方式拉取代码时&#xff0c;报 ssh password login&#xff0c;提示输入密码&#xff0c;这时很容易误填为 Git 的登录密码&#xff0c;其实这时需要输入 SSH 证书的密码&#xff0c;下面直接提供更改以及重新导入证书的方式。 首先需要确认你的本地是否有 SSH 钥…

cesium 使用一张图片作为背景影像底图

cesium加载影像地图的时候&#xff0c;可以添加一张图片作为影像图片&#xff0c;避免一开始加载的时候地图上出现缺瓦片而不美观的情况 一、代码实现 // 添加一张图片作为影像图片&#xff0c;避免一开始加载的时候地图上出现缺瓦片的情况var world new Cesium.SingleTileI…

使用Vue3组件的计算属性

计算属性在Vue.js的computed选项中定义&#xff0c;它可以在模板上进行双向数据绑定以展示出结果或者进行其他处理。 通常用户会在模板中定义表达式&#xff0c;非常便利&#xff0c;Vue.js的设计初衷也是用于简单运算。但是在模板中放入太多的逻辑&#xff0c;会让模板变得臃…

20230610 1+X 中级理论考试20230916 1+X 中级理论考试

20230610 1X 中级理论考试 对分组结果进行约束使用having关键字 排序使用order by&#xff0c;倒序使用desc 删除数据的DELETE语句DELETE FROM TABLENAME ArrayList实现了List接口 ArrayList中的数据是有序的 final为常量关键字&#xff0c;修饰一个变量时表示该变量为…

QT 使用QMediaPlayer实现的简易视频播放器

文章目录 效果图功能点类介绍代码介绍总结 QT 使用QMediaPlayer实现的简易视频播放器 效果图 功能点 播放指定视频全屏/退出全屏开始/暂停/重置视频拖拽到指定位置播放 类介绍 需要在配置文件中加入Multimedia, MultimediaWidgets这俩个库。Multimedia&#xff1a;提供了一套…

演示python连接数据库

先准备好数据库的配置&#xff0c; 域名&#xff0c;端口号&#xff0c;用户&#xff0c;密码&#xff0c;数据库名称。安装好【pymysql】库。 注意这里的db里&#xff0c;输入 数据库的分库名称&#xff0c;不是输数据库的名称 # 导包 import pymysql# # 连接到MySQL数据库 …

Jackson 2.x 系列【15】序列化器 JsonSerializer

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 概述2. 方法2.1 构造2.2 序列化2.3 其他 3. 实现类3.1 StdSerializer3.1.1 源…

说说TCP为什么需要三次握手和四次挥手?

一、三次握手 三次握手&#xff08;Three-way Handshake&#xff09;其实就是指建立一个TCP连接时&#xff0c;需要客户端和服务器总共发送3个包 主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备 过程如下&#xff…

12 | 排序(下):如何用快排思想在O(n)内查找第K大元素?归并排序和快速排序

 下载APP  12 | 排序&#xff08;下&#xff09;&#xff1a;如何用快排思想在O(n)内查找第K大元素&#xff1f; 2018-10-17 王争数据结构与算法之美进入课程 讲述&#xff1a;修阳 时长21:58大小8.81M  上一节我讲了冒泡排序、插入排序、选择排序这三种排序算法&…

Linux系统软件安装

实战&#xff1a;在Linux上部署各类软件 MySQL数据库管理系统安装部署【简单】 简介 MySQL数据库管理系统&#xff08;后续简称MySQL&#xff09;&#xff0c;是一款知名的数据库系统&#xff0c;其特点是&#xff1a;轻量、简单、功能丰富。 MySQL数据库可谓是软件行业的明…

数据库不用mmap

你确定你想用 MMAP 实现数据库么&#xff1f;_哔哩哔哩_bilibili MMAP 的随机读与顺序读的性能表现不好&#xff0c;以及对于写主要是不可控的刷入时机以及代码冗余&#xff0c;所以 MMAP 不适合在数据库中使用。 mmap是posix系统调用&#xff0c;它提供由操作系统管理内存映…

el-date-picker禁用指定范围的日期

elementUI中el-date-picker禁用指定日期之前或之后的日期 通过配置picker-options配置指定禁用日期&#xff08;pickerOptions写到data里面&#xff09; <el-date-pickerv-model"date"type"date"size"small"value-format"yyyy-MM-dd&qu…

怎么显示文件后缀名?这4个策略很赞!

“在查看文件时&#xff0c;我总是无法看到文件的后缀名&#xff0c;有时候我都分辨不出它是什么文件&#xff0c;有朋友知道怎么显示文件后缀名吗&#xff1f;” 在日常使用电脑的过程中&#xff0c;文件后缀名扮演着重要的角色&#xff0c;它可以帮助我们识别文件的类型&…

C——找单身狗2

题目内容&#xff1a; 在一个数组中&#xff0c;室友两个数字出现了一次&#xff0c;其他所有数字都出现了两次。找出只出现一次的数字。 如&#xff1a;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff…