mxgraph的性能问题

本人做一个监控系统的开发，用到了mxgraph技术，几乎开发完了，测试人员发现任何操作都会导致内存上升，并且不会释放，我想了很多办法来fix这个问题，都没有成功，最后怀疑是不是mxgraph技术本身有内存泄露的问题了，于是改写了一个例子来测试它的性能，有200个节点，每隔10分钟刷新每个节点的图片，发现IE下内存上升的很严重，在sIEve下测试时，发现每改变一次style，使用的内存会增加好多，生成了很多对象没有释放，按理来说，改变一次style只是把相应的节点换了一下图片而已，不应该产生新对象啊，但结果不是我认为的那样。于是联系了mxgraph的中国代理商，让他们给看看。结果他们说已经给了开发人员，并且正在解决这个问题。但至今没消息，8月5号，mxgraph发布了一个新版本，说是解决了一个mxEvent的bug，我用新版本测试了一下发现在IE下内存还是在增长，只是增长速度减缓了些，所以定时刷新的监控系统可能不适合用这种技术。附上我的代码：

<!--

$Id: images.html,v 1.25 2012/11/20 09:06:07 gaudenz Exp $

Images example for mxGraph. This example demonstrates using

background images and images for for the label- and image-shape.

-->

<html>

<head>

<title>Images example for mxGraph</title>

mxBasePath = '../src';

</script>

// Program starts here. Creates a sample graph in the

// DOM node with the specified ID. This function is invoked

// from the onLoad event handler of the document (see below).

function main(container)

{

// Checks if the browser is supported

if (!mxClient.isBrowserSupported())

{

// Displays an error message if the browser is not supported.

mxUtils.error('Browser is not supported!', 200, false);

}

else

{

// Creates the graph inside the given container

var graph = new mxGraph(container);

// Disables basic selection and cell handling

//graph.setEnabled(false);

configureStylesheet(graph);

// Gets the default parent for inserting new cells. This

// is normally the first child of the root (ie. layer 0).

var parent = graph.getDefaultParent();

// var pregetImage=mxGraph.prototype.getImage();

mxGraph.prototype.getImage=function(state){

var oldImage= (state != null && state.style != null) ?

state.style[mxConstants.STYLE_IMAGE] : null;

var imageStyle=['images/icons48/gear.png','images/icons48/server.png','images/icons48/mail_new.png','images/icons48/keys.png','images/icons48/column.png'];

var rand = Math.floor(Math.random()*4);

return imageStyle[rand];

}

// Adds cells to the model in a single step

graph.getModel().beginUpdate();

try

{

var index=0;

var rowCnt=20;

var colCnt=10;

var vertexes=new Array(); //先声明一维

for(var i=0;i<rowCnt;i++){ //一维长度为rowCnt

vertexes[i]=new Array(); //在声明二维

for(var j=0;j<colCnt;j++){ //二维长度为colCnt

vertexes[i][j]=0;

}

var startX=20;

var startY=10;

var gapX=60;

var gapY=90;

for (var i = 0; i < rowCnt; i++) {

for (var j = 0; j < colCnt; j++) {

vertexes[i][j]= graph.insertVertex(parent, null, '', startX+i*gapX,startY+j*gapY, 50, 60, 'image');

}

finally

{

// Updates the display

graph.getModel().endUpdate();

}

setInterval(function(){

randomSetImage(graph);

},10000);

}

};

function randomSetImage(graph){

var images=['images/icons48/gear.png','images/icons48/server.png','images/icons48/mail_new.png','images/icons48/keys.png','images/icons48/column.png'];

var imageStyle=['image','bottom','top','right','left'];

var root=graph.getChildCells(graph.model.getRoot());

var cells=root[0].children;

for (var i = 0; i < cells.length; i++) {

var rand = Math.floor(Math.random()*5);

//var preStyle= cells[i].getStyle();

//graph.model.setStyle(cells[i],imageStyle[rand]);

//console.log(graph.getImage(graph.view.getState(cells[i],false)));

//graph.setCellStyles(mxConstants.STYLE_IMAGE, "image;image="+imageStyle[rand],[cells[i]]);

//graph.getView().clear(cells[i], false, false);

//graph.cellRenderer.redraw(graph.view.getState(cells[i],false));

//graph.getView().invalidate(cells[i]);

graph.getView().clear(cells[i], false, false);

//preStyle=null;

}

graph.getView().validate();

//CollectGarbage();

imageStyle=null;

}

function configureStylesheet(graph)

{

var style = new Object();

style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;

style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;

style[mxConstants.STYLE_IMAGE] = 'images/icons48/keys.png';

style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';

graph.getStylesheet().putCellStyle('image', style);

style = mxUtils.clone(style);

style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';

graph.getStylesheet().putCellStyle('bottom', style);

style = mxUtils.clone(style);

style[mxConstants.STYLE_IMAGE] = 'images/icons48/server.png';

graph.getStylesheet().putCellStyle('top', style);

style = mxUtils.clone(style);

style[mxConstants.STYLE_IMAGE] = 'images/icons48/earth.png';

graph.getStylesheet().putCellStyle('right', style);

style = mxUtils.clone(style);

style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';

graph.getStylesheet().putCellStyle('left', style);

};

</script>

</head>

</div>

</body>

</html>

posted on 2013-08-08 16:21 Kora 阅读(1451) 评论(0) 收藏举报

刷新页面返回顶部

Kora

导航

公告

mxgraph的性能问题