四度码科技一家专注微信小程序开发定制制作服务的公司

一站式开发服务商

提供设计,开发,测试,售后服务一条龙服务

133-4760-7931
公司资讯
您的位置: 主页 > 新闻中心 > 公司资讯 >

小程序性能优化的几个建议

发布时间:2020-08-22 11:09:59浏览次数:
    关于微信小程序性能优化的一些方法,和大家分享一波~
优化建议
 
    01
 
    控制代码包大小
 
    1.开启开发者工具中的“上传代码时自动压缩”
 
    2.及时清理无用代码和资源文件
 
    3.减少代码包中的资源文件大小和数量
 
    4.将资源文件放在CDN中
 
    5.提取公共样式和公共组件
 
    6.代码和图片压缩
 
    02
 
    分包加载
 
    1.将小程序中不常用的页面放在多个分包内,主包只保留最常用的核心页面。
 
    如启动页和tabBar页面,以及分包都需要用的公共资源脚本。
 
    2.启动时只加载主包,使用时按需下载分包。
 
    3.分包预加载——开发者预先配置页面可能会跳转到的分包,框架在进入页面后根据配置进行预加载。
 
    03
 
    运行机制优化
 
    1.减少立即执行的代码数量
 
    2.避免高开销和长时间阻塞代码
 
    3.页面代码都写入页面的生命周期中
 
    4.做好缓存策略
 
    04
 
    数据管理优化
 
    首屏请求数量尽量少于5个,超过的可以做接口合并,对多次提交的数据可以做合并处理
 
    05
 
    首屏加载优化
 
    1.提前请求:异步数据请求不需要等待页面渲染完成
 
    2.利用缓存:利用storageAPI对异步请求数据进行缓存。二次启动时先利用缓存数据渲染页面,再进行后台静默更新。
 
    3.避免白屏:先展示页面骨架和基础内容。
 
    4.及时反馈:即时地对需要用户等待的交互操作给出反馈,避免用户以为小程序无响应。如点赞,先改变按钮样式,再发送异步请求。
 
    06
 
    渲染性能优化
 
    1.避免不当使用setData
 
    setData是逻辑层向渲染层的通讯,这个通信不是直接给webview,而是通过走了native层。在数据传输时,逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分,之后将数据发送给视图层。
 
    同时,逻辑层还会将setData所设置的数据字段与data合并,使开发者可以用this.data读取到变更后的数据。
 
    (1)使用data在方法间共享数据,data应只包含与页面渲染相关的数据。
 
    (2)只传输页面中发生变化的数据,使用setData的特殊key实现局部更新
 
    (3)短时间内频繁调用setData
 
    (4)对连续的setData调用进行合并
 
    (5)后台页面进行setData,抢占前台页面的渲染资源——页面切入后台的setData调用,延迟到页面重新展示时执行
 
    (6)页面列表:使用懒加载+动态移除非可视区域范围内的内容。
 
    (7)耗时较长的js做到异步
 
    2.避免不当使用onPsgeScroll
 
    (1)只在必要时监听pageScroll事件
 
    (2)避免在onPageScroll中执行复杂逻辑
 
    (3)避免在onPageScroll中频繁调用setData
 
    (4)避免频繁查询节点信息(SelectQuery),部分场景建议使用节点布局相交状态监听(IntersetctionObserver)替代
 
    3.使用自定义组件
 
    4.canvas渲染
 
    (1)分层绘制到不同canvas
 
    (2)不变的部分单独绘制到一个canvas,动态生成的绘制到一个canvas,最后合入一个canvas
 
    5.获取节点位置,用intersectionObject
 
    08
 
    建议
 
    1.使用真机调试
 
    2.开发工具在network里看不到图片资源的加载。要看图片懒加载,要设置微信开发工具的代理到127.0.0.1,通过charles抓包看到
 
    3.改造setData,记录性能优化的提升
 
    this._startTime=newDate().getTime();letfn=this.setData;this.setData=(obj={},handle='')=>{letnow=newDate().getTime();//上报渲染所需要的时间log(now-this._startTime)fn.apply(this,[obj,handle]);};
 
    用这些方法,我的小程序瘦了很多。你也可以试试~
133-4760-7931