• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序的性能优化

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微盟小程序性能优化要分享的内容分为三部分,启动性能加载、首屏加载的体验建议和渲染性能优化。

 

先讲启动性能加载的性能优化实践,先看启动加载过程的流程:

 

 

· 公共库注入

· 资源准备(基础UI创建,代码包下载)

· 业务代码注入和渲染

· 渲染首屏

· 异步请求

 

 

优化方案

 

1、控制代码包大小

 

· 开启开发者工具中的 “ 上传代码时自动压缩 ”

· 及时清理无用代码和资源文件

· 减少代码包中的图片等资源文件的大小和数量

· 将图片等资源文件放到CND中

· 提取公共样式

· 代码压缩,图片格式,压缩,或者外联

· 公共组件提取,代码复用

 

2、 分包加载

 

分包加载过程流程

 

 

在开发小程序分包项目时,会有一个或者多个分包,其中没有分包小程序必须包含一个主包,即放置启动页面或者tabBar页面,以及一些分包都需要用到的公共资源脚本。

 

在小程序启动时,默认会下载主包并且启动主包内页面,如果用户打开分包内的页面,客户端会把分包下载下来,下载完之后再进行展示。

 

· 分包加载流程

 

使用分包加载的优点:

 

· 能够增加小程序更大的代码体积,开发更多的功能

· 对于用户,可以更快地打开小程序,同时不影响启动速度

 

使用分包加载有哪些限制:

 

· 整个小程序所有分包不能超过8M

· 单个主包/分包不能超过2M

 

3、 运行机制优化

 

· 代码中减少立即执行的代码数量

· 避免高开销和长时间阻塞代码

· 业务代码都写入页面的生命周期中

· 做好缓存策略

 

4、 数据管理优化

 

 

· 首屏请求数量尽量不能超过5个,超过的可以做接口合并(node层,服务端都可以处理)

· 对多次提交的数据可以做合并处理

 

接下来和大家聊一聊首屏加载的体验建议和渲染性能优化。

 

二、首屏加载的体验建议

 

· 提前请求  

  异步数据请求不需要等待页面渲染完成。

 

· 利用缓存

  利用storage API对异步请求数据进行缓存,二次渲染页面,再进行后台更新。

 

· 避免白屏

  先展示页面骨架和基础内容。

 

三、渲染性能优化

 

·  每次 setData 的调用都是一次进程间通信过程,通信开销与 setData 的数据量正相关

·  setData 会引发视图层页面内容的更新,这一耗时操作一定时间中会阻塞用户交互

·  setData 是小程序开发使用最频繁,也是最容易引发性能问题的

·  在页面列表中使用懒加载+动态移除非可视区域范围内的内容,让dom小下去

·  耗时比较长的js做到异步,不要阻塞进程(js属于单线程)

·  少使用scroll-view,这个组件对性能的影响太大,单纯的只是需要一块区域滚动,可以使用view+css的方式实现

·  在页面频繁滚动触发回调函数,会导致页面卡顿,这时必须和防抖动函数或者节流函数相结合做一些处理

·  页面中的图片可以使用懒加载的方式(添加lazy-load属性,只针对page与scroll-view下的image有效

·  页面跳转要做一下限制,如果页面快速点击会出现跳转多次的情况

 

 避免不正当的使用setData

 

· 使用data在方法间共享数据,可能增加setData传输的数据量。data 应该仅仅包含与页面渲染相关的数据

· 使用setData 传输大量的数据,通讯耗时与数据量成正比,导致页面更新延迟 可能造成页面更新开销增加。所以setData 仅传输页面需要的数据,使用setData 的特殊Key 实现局部更新

· 短时间内频繁调用setData  (操作卡顿、交互延迟   阻塞通信、页面渲染延迟),对连续的setData 调用进行合并

· 后台进行页面setData  (抢占前台页面的渲染资源) 例如 活动定时器 再页面切入后台时应该将关闭

 

避免不正当的使用onPageScroll

 

· 只在必要的时候监听pageScroll 事件

· 避免在onPageScroll 中执行复杂的逻辑

· 避免在onPageScroll 中频繁调用setData

· 避免频繁查询节点信息(SelectQuery) 部分场景建议使用节点布局相交状态

·  监听( IntersectionObserver) 替代

 

使用自定义组件

在需要频繁更新的场景下,自定义组件的更新只在组件内部进行,不受页面部分内容的复杂性的影响。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap