Skip to main content

对象池

池化技术

池化技术是一种编程技巧,在请求量大时可以明显优化应用性能,降低系统资源开销

类比:筷子桶

  1. 没有筷子就去没买筷子
  2. 筷子不够就去买筷子(并一起放入筷子桶)
  3. 刀叉同上(不同的是:刀叉放入刀叉桶)

池化技术应用广泛,如内存池,线程池,连接池等

数据库连接池,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);
}
};

其他案例