微信小程序性能优化技巧
微信小程序如果想要优化性能,有关键性的两点:提高加载性能和提高渲染性能。
一、提高加载性能
当用户点击小程序后发生了什么?
资源准备(代码包下载) —— 业务代码注入和渲染 —— 异步请求数据
上面的三个状态,我们经常遇到,它们分别对应小程序的下面三个状态:
- 有三个点的白屏阶段: 下载代码包的阶段
- 没有三个点的白屏: 业务代码注入和渲染的阶段
- 加载中: 业务代码中异步请求数据
总的来说,小程序呈现到用户面前,实际上经历了下面两个阶段:运行环境的加载,下载代码包启动小程序。
运行环境预加载:这步是微信做的。微信会在用户打开小程序之前就已经准备好环境,用户点击小程序入口后,直接下载小程序的代码包即可。
下载代码包启动小程序,小程序代码包里面的代码,不是小程序的源代码,而是编译、压缩、打包之后的代码包。
下图中,左侧的“预加载”对应的是运行环境的预加载,右侧的“小程序启动” 对应的是下载代码包启动小程序。
小程序提供的运行环境,分为逻辑层(AppService)和 视图层(webView),逻辑层是执行javascript的地方,视图层是渲染页面的地方。当小程序的代码包下载完毕后,业务代码分别注入逻辑层和渲染层。
提升加载性能的最最最关键性一点是,控制包的大小,这个也是微信官方的说法。
提升体验最直接的方法是控制小程序包的大小,基本上可以说,1M的代码包,下载耗时1秒左右。
控制包大小的措施:
- 压缩代码,清理无用的代码
wxss 覆盖率较高,较少或没有引入未被使用的样式。按需引入 wxss 资源,如果小程序中存在大量未使用的样式,会增加小程序包体积大小,从而在一定程度上影响加载速度
- 图片放在cdn
- 避免将不会被使用的文件打包进去
- 采用分包策略
- 分包预加载
- 独立分包(版本要求有点高)
除了上面讲的控制包的大小,对异步请求的优化也很重要。
对异步请求的优化
- onLoad 阶段就可以发起请求,不用等ready
- 请求结果放在缓存中, 下次接着用
- 请求中可以先展示骨架图
- 先反馈,再请求。比如说,点赞的按钮,可以先改变按钮的样式,再发起异步请求。
二、提升渲染性能
setData 干了啥?每调用一次setData, 都是逻辑层向渲染层的一次通讯,这个通信还不是直接传给webView, 而是通过走了native层,通讯的开销很大。
渲染层收到通讯后,还需要重新渲染出来,所以,一次setData带来两次开销:通信的开销 + webview更新的开销。
setData工作原理:
小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。
而 evaluateJavascript 的执行会受很多方面的影响,数据到达视图层并不是实时的。
由于小程序运行逻辑线程与渲染线程之上,setData的调用会把数据从逻辑层传到渲染层,数据太大会增加通信时间。
在数据传输时,逻辑层会执行一次JSON.stringify
来去除掉setData
数据中不可传输的部分,之后将数据发送给视图层。
同时,逻辑层还会将setData
所设置的数据字段与data
合并,使开发者可以用this.data
读取到变更后的数据。
1、减少setData的数据量:如果一个数据不能会影响渲染层,则不用放在setData里面
2、合并setData的请求,减少通讯的次数
3、列表的局部更新
在一个列表中,有n
条数据,采用上拉加载更多的方式,假如这个时候想对其中某一个数据进行点赞操作,还能及时看到点赞的效果。此时,可以采用setData全局刷新,点赞完成之后,重新获取数据,再次进行全局重新渲染,这样做的优点是:方便,快捷!缺点是:用户体验极其不好,当用户刷量100多条数据后,重新渲染量大会出现空白期(没有渲染过来)
如果采用局部刷新,将点赞的id
传过去,知道点的是那一条数据,重新获取数据,查找相对应id的那条数据的下标(index
是不会改变的),用setData进行局部刷新
this.setData({list[index] = newList[index] })
3、小心后台页面的js
小程序中可能有n个页面,所有的这些页面,虽然都拥有自己的webview(渲染层), 但是却共享同一个js运行环境。
也就是说,当你跳到了另外一个页面(假设是B页面),本页面(假设是A页面)的定时器等js操作仍在进行,并且不会被销毁,并且会抢占B页面的资源。
在h5的环境中,当我们跳转到其他页面,老页面的js环境会被自动销毁,定时器什么都被销毁掉了,因此我们不需要关心老页面中,还有哪些js代码可能还会执行。但是在小程序中,我们必须手动的“清理”掉这样的代码。
4、小心onPageScroll
pageScroll 事件,也是一次通讯,是webview层向js逻辑层的通讯。这次通讯也是开销较大,如果考虑到这个事件被频繁的调用,回调函数如果有复杂的setData的话,性能就会很差了。
5、尽可能使用小程序组件
自定义组件的更新只在组件内部进行,不受页面其他部分内容的影响;比如一些运营活动的定时模块可以单独抽出来,做成一个定时组件,定时组件的更新并不会影响页面上其他元素的更新;各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用。
微信小程序性能优化技巧相关推荐
- 微信小程序性能优化之一
微信小程序性能优化之一 原文:微信小程序性能优化之一 性能优化 界面和业务逻辑之间事件交互 小程序调用native Native回调小程序 图片源文件优化 渲染优化 ----------------- ...
- 微信小程序性能优化方案
文章目录 微信小程序性能优化方案 提高加载性能 小程序代码包准备(下载代码包) 开发者代码注入 页面渲染优化 提升渲染性能 setData工作原理 优化方法 微信小程序性能优化方案 微信小程序如果想要 ...
- 小程序性能优化之页面预加载方案——让你的小程序运行如飞 集成篇
小程序性能优化之页面预加载方案 集成篇 转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725 前言 之前看到一篇文 ...
- 小程序性能优化之页面预加载方案——让你的小程序运行如飞 进阶篇
小程序性能优化之页面预加载方案 进阶篇 转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面 预加载方案 ...
- 微信小程序打开红包的css_微信小程序 css使用技巧总结
微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上.左.右三条边隐藏掉(颜色设为 transparent) .demo { width: 0; height: 0; border-wi ...
- 如何给微信小程序搜索优化?
微信小程序搜索优化(Mini Program SEO)是指针对微信小程序的搜索引擎优化,通过优化小程序内容.引流渠道等手段来提高小程序的曝光率和用户转化率. 以下是一些给微信小程序搜索优化的方法: 1 ...
- 微信小程序渗透测试技巧-小程序解包-反编译
微信小程序渗透测试技巧-小程序解包-反编译 简述 安装手机模拟器,比如说夜神.MuMu 下载和安装两个应用,微信和RE文件管理器 获取root权限 打开微信,搜索相对应的小程序,然后再打开RE文件管理 ...
- 【官方推荐】微信小程序搜索优化指南
最近,微信搜索正式升级为"微信搜一搜",并对能力进行了全面的升级.一方面是覆盖更多的场景服务,整合不同领域内容,另一方面品牌官方区全新的界面样式,除了作为固定首位展示,还为品牌方提 ...
- 如何提升微信小程序排名的技巧?
程序排名是指小程序在搜索引擎中的排名,它可以帮助小程序获得更多的曝光率和流量. 要想让自己的微信小程序排名更靠前,需要采取一些技巧. 今天厦门巨神峰小编给大家分享关于微信小程序排名提升的技巧. 微信小 ...
最新文章
- tensorflow问题
- 用Microsoft DirectX光线跟踪改善渲染质量
- Jsoncpp 使用方法解析
- eve战巡族伤害_新版本各族3级战巡资料【纯手打】
- r 语言计算欧氏距离_一文搞懂常用R语言统计值计算:打倒描述性统计拦路虎
- android获取所有的子进程,Android M:如何获取所有进程UID?
- 安装jrebel热部署插件,并激活
- android扩散波动动画,使用WebGL制作图片的像素脉冲波(粒子化扩散波动)动画特效...
- 其他团队对本团队评价的总结
- 【51单片机快速入门指南】3:中断系统
- Spark内置图像数据源初探
- 【BZOJ4407】于神之怒加强版
- 中国著名的D版和破解软件下载网站(转)
- 利用dlib和opencv建立人脸识别数据集并进行人脸识别
- 阿里云在线扩容云盘(Windows系统)
- Centos7磁盘阵列部署与修复
- DSP28335学习记录(四)——ADC、DMA
- 解决phpStudy端口占用的问题
- 深漂中年程序员回忆录-南下找工作(二)
- 哈哈日语 五十音图之あ段音