MapEasy拖动时内存优化一则

来源：互联网发布：淘宝专业版模板编辑：程序博客网时间：2024/05/22 12:35

MapEasy设计上小巧精悍，但是内存性能方面没有充分考虑。尤其当拖动地图时，内存无极增加。

尽管MapPaneWidget.js代码中，存在如下移除旧瓦片功能，但是似乎根本不起作用。

for (var i = 0;i < oldTileNodes.length;i++) {
   if (oldTileNodes[i] != null) {
    mapDiv.removeChild(oldTileNodes[i]);
   }
  }

仅针对拖动地图方面的测试，如果要使上段代码起到效果，需mapDIV添加瓦片时，不给瓦片添加事件处理，如下修改：

if (isExist == false) {
     offsetX = tiles[i].getColumn() * MapModel.tileSize;
     offsetY = tiles[i].getRow() * MapModel.tileSize;
     //var tile = document.createElement("div");//QIU mark
     var tile = document.createElement("img");
     tile.src = tiles[i].getSrc();
     tile.id = tileId;
     tile.style.position = "absolute";
     tile.style.left = offsetX + "px";
     tile.style.top = offsetY + "px";
     /*tile.onmousedown = function() {
      return false;
     };*/
     mapDiv.appendChild(tile);
     //var tileImage = document.createElement("img");
     //tileImage.src = tiles[i].getSrc();
     /*tileImage.onmousedown = function() {
      return false;
     }*/
     //tile.appendChild(tileImage);
    }

貌似因为事件处理对象的循环引用，而照成的内存无法释放。

参考如下JS中内存泄露模式介绍。

http://www.ibm.com/developerworks/cn/web/wa-memleak/index.html?S_TACT=105AGX52&S_CMP=techcsdn

如果需要考虑Firefox等浏览器的操作，为瓦片添加onmousedown处理函数时，最好如下：

{...

     tile.style.left = offsetX + "px";
     tile.style.top = offsetY + "px";
     tile.onmousedown = nullOperation；

....}

function nullOperation() {
return false;
};