对象池
池化技术
池化技术
是一种编程技巧,在请求量大时可以明显优化应用性能,降低系统资源开销
类比:筷子桶
- 没有筷子就去没买筷子
- 筷子不够就去买筷子(并一起放入筷子桶)
- 刀叉同上(不同的是:刀叉放入刀叉桶)
池化技术应用广泛,如内存池,线程池,连接池等
数据库连接池,HTTP 连接池,Redis 连接池等
地图 tooltip 例子
第一次地图上搜索食物:面馆 第二次地图上搜索食物:火锅
注意:重复创建的相同的 div 内容
var tooltipFactory = (function () {
var toolTipPool = [];
return {
// 创建
create: function () {
if (!toolTipPool.length) {
// 没有
var div = document.createElement("div");
document.body.appendChild(div);
return div;
} else {
// 存在
return toolTipPool.pop();
}
},
//回收
recover: function (toolTipDom) {
return toolTipPool.push(toolTipDom);
},
};
})();
第一次搜索:面馆
var divArr = []; //div个数
var toolTipArr = ["A", "B"]; // 面馆个数和名字
for (let i = 0; i < toolTipArr.length; i++) {
let toolTipDiv = tooltipFactory.create();
toolTipDiv.innerHtml = toolTipArr[i];
divArr.push(toolTipDiv);
}
/* output
divArr = [
0:{div('A')},
1:{div('B')}
]
*/
第二次搜索:火锅
// 回收div
for (let i = 0; i < divArr.length; i++) {
tooltipFactory.recover(divArr[i]);
}
var toolTipArr2 = ["C", "D", "E"]; // 火锅个数和名字
for (let i = 0; i < toolTipArr2.length; i++) {
let toolTipDiv = tooltipFactory.create();
toolTipDiv.innerHtml = toolTipArr[i];
}
合并第一次和第二次搜索 优化通过搜索并渲染
var divArr = [];
var searchAndRender = () => {
// 回收div
for (let i = 0; i < divArr.length; i++) {
tooltipFactory.recover(divArr[i]);
}
var tooltipArr2 = apiResArr || []; // 接口请求(拿到新的地图点),返回接口
for (let i = 0; i < tooltipArr2.length; i++) {
let tooltipDiv = tooltipFactory.create();
tooltipDiv.innerHTML = tooltipArr2[i];
divArr.push(tooltipDiv);
}
};