前言
由于小程序本身层面做了一些优化，展示比h5在某些更优。但目前随着代码量的增加，页面本身显示得越来越不“小程序”了。本次着手从表现层面进行优化。
现场
- 首页列表越滚动越卡顿。
在请求20次后几乎卡死，究其原因发现是业务调用setComponent时，框架onion在updateComponent设置过多数据导致 。每次重新set时，会把新增数据合并到原有的数据再重新调用setData，这样让数据量成倍增加，但渲染时间却如下图，超过1M报错
image
[图片来源网络]
-
优化前，时间呈上图函数增长。最后一条接近3s
image
-
优化后，render的时间比较平稳，维持50ms以下。
image
-
- 优化方法
用一个新的数组来存储新增的数据，这样保证每次数据量体积稳定。
_updateComponent(name, indexs) {
let data = {},
newData = {},
componentKey = 'components.' + name
data[componentKey] = this.data.components[name]
if (indexs && indexs.length) {
Object.keys(data[componentKey]).forEach(key=>{
if (indexs.indexOf(key) > -1){
newData[componentKey + '.' + key] = data[componentKey][key];
}
})
data = newData
}
this.setData(data)
}
2.店铺首页
通过小程序模拟器的Audits检查页面问题
image
a.图片相关
-
大体积图片
- 图片统一限高裁切，部分图片过大，占用内存资源。通过添加w和h参数对图片大小控制
-
图片文件格式
- 判断是否支持webp？目前通过平台判断，非ios下则在图片链接后追加webp。当然更好的方式是通过加载是否支持webp的图片来实现，以后微信可能支持显示webp。
function supportWebpBySystem() {
supportWebp = false;
wx.getSystemInfo({
success: function(res){
var platform = res.platform || '';
if (platform.toLocaleLowerCase() !== 'ios') {
supportWebp = true;
}
},
fail: function(){
supportWebp = false;
},
});
}
- 减少一次性图片请求
- 使用图片懒加载。在未处理前最多同时请求30+张图片，这无论是在流量上还是性能上都有一些损失。由于我们采用组件开发的形式，考虑到一些特殊情况，所以在组件内部新增一个
lazyLoad变量来控制懒加载。
组件的每一个元素上都有一个唯一标示no，而它又作为class。这样就可以通过createIntersectionObserver来监听加载
- 使用图片懒加载。在未处理前最多同时请求30+张图片，这无论是在流量上还是性能上都有一些损失。由于我们采用组件开发的形式，考虑到一些特殊情况，所以在组件内部新增一个
用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
支持版本 >= 1.9.3
function createIntersectionObserver(){
var self = this,
key,
id = this.id.replace('.','-'),
lazyLoad = this.data.lazyLoad;
setTimeout(() => {
for(let i = 0;i < this._data.no; i++){
key = id + '-' + i;
(function(key){
wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe('.' + key, (res) => {
if (res.intersectionRatio > 0 && !lazyLoad[key]) {
self.setData({
['lazyLoad.' + key] : true
});
}
});
})(key);
}
}, 300); // 延时是为了挂载完再监听，这里只是随便写的一个数字，具体挂载完的时间没有测试过
}
b.变量管理
与UI没关系的变量，不通过setData来进行设置。直接通过变量_data来管理，这样既能减少调用setData的次数，又能缩小data的大小。
参考
【微信小程序】性能优化https://juejin.im/post/5b9f5d55e51d450e4006a9e5
彻底解决长列表页setData超过1M时报错和严重卡顿的问题
网友评论