小程序优化
2023-07-02 21:38:49 0 举报AI智能生成
登录查看完整内容
小程序常见优化点
作者其他创作
大纲/内容
小程序优化
效率是最低的
第一种是使用Animation对象，实现了一个CSS动画；
拥有更好的性能和更容易控制的接口，它是目前推荐选择的方式
第二种是使用页面或组件对象，拥有的animate方法实现的关键帧动画；
以滚动事件驱动的响应式动画，它的用户体验感最好，使用也简单，是一种推荐的低成本创建响应式页面效果的一种方式。
第三种是使用滚动事件驱动的响应式动画；
不需要逻辑层的参与改变视图层组件的样式，在视图层里边就可以自己完成动画了
第四种WXS脚本，实现了一个样式动画；
动画
组件化，将数据变化频繁的部分放置到独立的组件
wxs 将部分逻辑转移到视图层
requestAnimationFrame 进行更新
渲染缓慢卡顿
绕过逻辑层，与逻辑层相互读取，情况下控制频率，有助于性能
尽量减少与逻辑层沟通
wxs
重渲染与自定义组件优化
视图层初级优化技巧
总结点数 < 1000
节点数深度 < 30 层
子节点数 < 60
使用wxml标签要克制，能不用容器标签就不用，能少用标签就少用标签：可以使用对应的标签如text，减少view 使用，循环中可以使用block 减少标签数
控制节点数
默认使用catch代替bind绑定事件，自定义的data数据属性里边永远只存储基本的数据类型，并且只存储小数据
在动态渲染的这个列表里边，一定要绑定一个唯一的wx:key，静态渲染的我们可以使用index
对于scroll高频事件，我们要节流 使用这个节流函数throttle
对于用户的单击事件，尤其是高频触发的一个单击事件，可以适当使用防抖函数debounce，视
页面wxml渲染优化
使用webp
使用cdn
合并雪碧图
图片压缩： 使用miniprogram-slim 、小熊猫、image-mini
图片优化技巧
优先使用本地缓存
使用priority-async-queue库 或其他库对请求队列进行优先级划分
网络请求优化
合并操作
数组，对象 可以采用计算属性字符串更新
recycle-view 组件可以采用update 更新
不参与视图更新的数据直接挂载在page里面不要通过setData更新
setData 优化
定时器是异步线程里的东西，在离开页面的时候一定要记得销毁
创建的监听，记得取消监听
对于回调方法记得绑定this，减少this 查找时间
global 对象挂载数据要及时清除，gc不能主动回收
脚本优化
使用padding改变单击区域大小
使用:after 伪类改变区域
点击区域最小不能小于宽高20px
加大点击区域
UI 优化
手动剔除
gulp-cleanwxss插件
剔除无用代码
样式尽量隔离，减少全局样式
惯性滚动 ios 手动开启 -webkit-overflow-scrolling:touch
wxss 优化
工具使用技巧
懒加载 ： 按需注入 : app.json配置文件里面添加一个lazyCodeLoading的配置
初始渲染缓存的页面相当于是一个静态化的本地化的骨架屏页面
静态初始渲染缓存: 页面配置里面只需要添加一个叫做initialRenderingCache等于static这样的一个配置就可以启用静态缓存
动态缓存可以指定缓存内容
setInitialRenderingCache 设置缓存 - 放在onReady 不能更加早
动态初始渲染缓存: 页面配置里面我们添加一个initialRenderingCache等于dynamic这样的一个配置就可以启用动态缓存了
页面经常变化的时候，它时效性较高的动态详情页面，这种页面它适合使用骨架屏
用于提供导航功能的一个首页或者是二级页面，一般适合使用初始渲染缓存，
建议
代码按需注入与初始渲染缓存
在app.json全局配置文件里面，我们可以在subpackages这个节点之下添加一个分包设置，root设置为当前页面所在的目录的一个名称，然后再加上pages设置就可以完成用户主页的一个分包设置了。
自定义tabbar -- 绕过原生小程序tabbar 页面只能放在主包，并且只能为tab 页面
分包
只需要在分包配置节点下面添加一个independent等于true
独立分包获取不到app 需要独立初始化app 并创建默认值
独立分包
preloadRule就是预加载的一个配置
文档地址
文档
分包预加载
使用独立分包和分包预下载
分包异步化机制，允许在一个普通分包里面异步加载和使用另一个普通分包里边的代码和组件
开启懒加载组件后： 可以模拟器开启占位组件测试
主包自定义组件也建议放在分包内部
占位组件
创建一个空白页面：在加载主包完成跳转
主包内容预加载
需要处理入口链接参数
提前加载数据：EventChannel 传递加载数据到真实首页
封面页
require.async 方法加载
require 方法 异步加载
分包中的插件也可以通过类似的方法调用：requirePlugin
插件
JS代码的分包异步化
作用：
调用需要克制，不能频繁调用，调用造成程序卡顿
WXWebAssembly
通过工具函数将wx api promise 化
使用异步转同步的编程范式
复合命令模式是一个设计模式
用来对齐多个文件下执行节点位
可以在App.onLaunch 中拉取首页数据
使用并发复合命令模式对齐代码执行点
开启一个异步线程，用于执行耗时操作
worker 支持es6 函数
{ \"workers\": \"workers\"}
需要再app.json 中开启
worker 存在很多限制，当回调中如果其中设置视图变化，也会出现卡顿
最适合做一些有规律的大数据运算，并且在后续逻辑不会频繁触发视图
使用worker开启新线程进行耗时运算
将计算转移到服务器，并且使用计算节点
将计算进行缓存提审计算效率
在后端使用Go语言异步执行逻辑运算代码
将获取系统信息接口采用复合命令模式，将这些数据获取放置到page 下的onready
尽量在运行时获取，避免初始化时获取
这个数据在哪里定义就在哪里拉取，条件成熟的时机在哪里产生，我们就哪里触发命令的执行，
使用串发命令模式延迟同步请求
正常状态
后台运行状态： 是从前台进入后台以后它有一个5秒的后台运行状态
挂起状态： 从后台运行状态至被销毁之前它有一个30分钟的挂起状态，在挂起状态里面它这个代码本身已经被冻结，所有代码都不会运行
小程序状态
后台事件触发状态：wx.onAppHide 或者app.js onHider
劫持对象注意： 需要克制，并且在入口劫持，做好注释，减少他人成本
小程序切换后台后，不再使用 setData
数据预拉取
周期性更新
在项目外使用数据预拉取与周期性更新，及云函数的使用
http协议： HTTP2
enableCache: true
enableQuic: true
enableHttpDNS: true
enableChunked: true
优化后端接口及网络请求参数
首屏及逻辑层代码优化技巧
0 条评论
回复 删除
下一页
