解决小程序列表更新卡顿方案
什么情况会引发小程序的渲染性能问题
- setData传递大量的新数据
- 频繁的执行setData操作
- 过多的页面节点数
解决方案(分别针对上述情况)
- data对象中只传输视图层要用的数据 合理利用局部更新
- 在不影响业务流程的前提下,将多个 setData 调用合并执行,减少线程间通信频次。
当需要在频繁触发的用户事件(如 PageScroll 、 Resize 事件)中调用 setData ,合理的利用 函数防抖(debounce) 和 函数节流(throttle) 可以减少 setData 执行次数。
函数防抖(debounce):函数在触发n秒后才执行一次,如果在n秒内重复触发函数,则重新计算时间。
函数节流(throttle):单位时间内,只会触发一次函数,如果同一个单位时间内触发多次函数,只会有一次生效。
除了让开发者自觉遵循规则来减少 setData 数据传输量和执行频率之外,我们还可以自己设计一个 diff 算法,重新对 setData 进行封装,使得在 setData 执行之前,让待更新的数据与原 data 数据做 diff 对比,计算出数据差异 patch 对象,判断 patch 对象是否为空,如果为空则跳过执行更新,否则再将 patch 对象执行 setData 操作,从而达到减少数据传输量和降低执行 setData 频率的目的。
网友方案 转摘自 https://segmentfault.com/a/1190000019910111
小程序看起来很简单易上手 但是有很多奇奇怪怪的坑和一系列的性能优化问题 还需要深入研究才能更好的实现需求提升用户体验
diff算法实现思路
策略:在数据更新之前先对更新前后数据做diff对比,找出差异部分patch,如果patch为空,结束更新,否则只对patch部分做更新。
设计思路:
- diff前先将数据路径写法数据转换成格式化JSON
- 使用深度优先遍历策略
- 只对同层节点进行对比
- 使用数据路径方式实现局部更新
- 减少不必要的diff对比
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79const OBJECT_TYPE = '[object Object]';
const ARRAY_TYPE = '[object Array]';
const getType = (obj) => Object.prototype.toString.call(obj);
const initPath = (data) => {
if (getType(data) !== OBJECT_TYPE) return;
for (let item in data) {
if (/\w+\.\w+/g.test(item) && item.indexOf('[') === -1) {
const arr = item.split('.');
let result = data, len = arr.length;
for (let i = 0; i < len - 1; i++) {
const arrItem = arr[i];
if (getType(result[arrItem]) !== OBJECT_TYPE) {
result[arrItem] = {};
}
result = result[arrItem];
}
result[arr[len - 1]] = data[item];
delete data[item];
}
}
};
const initData = (cur, pre, root = false) => {
if (cur === pre) return;
const curType = getType(cur), preType = getType(pre);
if (curType !== preType) return;
if (curType === ARRAY_TYPE && cur.length >= pre.length) {
for (let i = 0; i < pre.length; i++) {
initData(cur[i], pre[i]);
}
} else if (curType === OBJECT_TYPE && Object.keys(cur).length >= Object.keys(pre).length) {
for (let key in pre) {
if (!root && cur[key] === undefined) {
cur[key] = null;
} else {
initData(cur[key], pre[key]);
}
}
}
};
const doDiff = (cur, pre, target, path = '', root = false) => {
if (cur === pre) return;
const curRootType = getType(cur), preRootType = getType(pre);
if (curRootType === ARRAY_TYPE && preRootType === curRootType && cur.length >= pre.length) {
for (let i = 0; i < cur.length; i++) {
doDiff(cur[i], pre[i], target, `${path}[${i}]`);
}
return;
}
if (curRootType === OBJECT_TYPE && preRootType === curRootType && (root || Object.keys(cur).length >= Object.keys(pre).length)) {
const keys = Object.keys(cur);
for (let key of keys) {
const curVal = cur[key], preVal = pre[key];
const curType = getType(curVal), preType = getType(preVal);
if (curVal === preVal) continue;
if (curType === ARRAY_TYPE && preType === curType && curVal.length >= preVal.length) {
for (let i = 0; i < curVal.length; i++) {
doDiff(curVal[i], preVal[i], target, `${path ? path + '.' : ''}${key}[${i}]`);
}
continue;
}
if (curType === OBJECT_TYPE && preType === curType && Object.keys(curVal).length >= Object.keys(preVal).length) {
for (let sKey in curVal) {
doDiff(curVal[sKey], preVal[sKey], target, `${path ? path + '.' : ''}${key}.${sKey}`);
}
continue;
}
target[`${path ? path + '.' : ''}${key}`] = curVal;
}
return;
}
target[path] = cur;
};
export default function diff(data, prevData) {
const target = {};
initPath(data);
initData(data, prevData, true);
doDiff(data, prevData, target, '', true);
return target;
}