kineticjs의 성능 문제

Question

캔버스의 모양 수가 증가함에 따라 kineticjs에 심각한 성능 문제가 있습니다. 두 가지 기능이 있습니다. 하나는 경로와 텍스트를 초기화하고 무대에 렌더링하는 기능입니다. 두 번째 함수는 5 초마다 호출되며 이전에 그려진 경로와 텍스트의 모든 변경 사항을 업데이트합니다. 여기

/** 
    * Function that inits the shapes 
    */ 
    init = function(params) { 
    //Create the path object 
    var path = new Kinetic.Path({ 
    data : params.geom, 
    fill : params.fill, 
    stroke : params.stroke.fill, 
    strokeEnabled : false, 
    scale : 1 
    }); 
    path.setId(params.id + '.path'); 
    var simpleText = new Kinetic.Text({ 
    x : params.x, 
    y : params.y + (params.height /2), 
    text : params.displayText, 
    fontSize : 12, 
    fontFamily : params.family, 
    fontStyle : params.style, 
    fill : params.fill 
    }); 
    simpleText.setId(params.id + '.text'); 

    var layer = new Kinetic.Layer(); 
    layer.setId(params.id); 
    layer.add(path); 
    layer.add(simpleText); 
    stage.add(layer); 
} 

/** 
* Update every 5 seconds based on new data 
*/ 
update = function(params) { 
    var layer = null; 
    if (Kinetic.Global.ids[params.id] != undefined) { 
    layer = Kinetic.Global.ids[params.id]; 
    //Set text 
    var textItem = Kinetic.Global.ids[params.id + '.text']; 
    textItem.setText(params.displayText); 
    //center the text 
    textItem.setAttr('x', params.x + (params.width/2) - (textItem.textWidth/2)); 
    textItem.setAttr('y', params.y + (params.height/2) -   textItem.getAttr('fontSize')); 
    // set center style 
    textItem.setAlign('center'); 
    //Set path color 
    var pathItem = Kinetic.Global.ids[params.id + '.path']; 
    pathItem.setFill(params.fill); 
    pathItem.setOpacity(params.alpha); 

    layer.clear(); 
    layer.draw(); 
    } 
} 

이 코드는 부진 얻고 증가를 그릴 모양의 숫자로 높은 메모리를 소모합니다, 내가 노력하고 무엇의 샘플 코드 조각입니다. 위의 코드에는 개선 할 부분이 많이 있으며 해당 포인터를 찾고 있습니다. 특히 ID 룩업 및 업데이트가 기존 모양을 업데이트하는 가장 좋은 방법인지 확신 할 수 없습니다.

Answer 1

Kinetic.Global.ids 개체를 통해 개체를 찾는 대신 layer.get('#someID') 함수를 사용할 수 있습니다. 성능 향상에 도움이되는지는 확실하지 않지만 시작일 수 있습니다.

또한 업데이트 할 때마다 레이어를 layer.clear() 사용해야한다고 생각하지 않습니까? 난 layer.draw() 그냥 도형을 업데이 트에 충분하다고 생각합니다.

제안는 : 아마도 당신은 단지 당신이 히트 층 때마다 다시 그릴 필요가 없기 때문에 도움이 될 수 있습니다 대신 draw()의 drawScene() 5 초마다 사용해야 할 수도 있습니다. 당신이 모양을 많이 가지고 시작 특히, 레이어에 5 초마다를 draw() 방법을 사용하든 매우 비싼 무슨 일이 일어나고 있는지, What is the difference between KineticJS draw methods?

: 운동 그리기 기능의 차이 여기를 참조하십시오 없습니다 레이어.

또 다른 중요한 질문은입니다. 항상이 5 초마다 변경됩니까? 이것이 의미하는 것은 업데이트가 발생하지 않았기 때문에 레이어를 그릴 필요가 없을 때도 있습니다. 객체가 업데이트되었는지 여부를 확인할 수 있으면 업데이트 기능을 호출해야하는지 여부와 레이어를 다시 그려야하는지 여부를 결정할 수 있습니다.

지난 마지막 언급 한 내용을 바탕으로 작성한 마지막 제안은 매번 레이어를 다시 그리지 않아도되므로 레이어의 모든 개체가 업데이트되지 않은 레이어 내부의 모든 개체를 다시 그릴 수 있습니다 다시 그리기). 일부 개체 만 업데이트되었습니다. 이 경우 Kinetic.Group을 사용하여 각 텍스트/경로를 그룹화하면 layer.draw() 대신 group.draw()을 사용할 수 있습니다. 이제 5 초마다 데이터를 업데이트하는 그룹을 찾을 수 있다면 매 5 초마다 전체 레이어 대신 Kinetic.Group을 그려야합니다. 감사합니다 http://kineticjs.com/docs/Kinetic.Container.html#get