Chrome 용 스크립트 메모리 최적화

Question

html5 canvas 요소의 픽셀과 함께 작동하는 스크립트가 있습니다. 그리고 Google 크롬 (버전 : 17.0.942.0 dev)에서 이상한 동작이 있습니다.

• 픽셀 선택 선택 도구 나 색조를 변경하고있을 때 문제가

메모리에서 특정 POLYGONE 내부 픽셀의 색상을 변경 : I 픽셀의 조작 2 종류가 그 탭의 250MB (때로는 더 많은)까지 모든 변경 후 초기 크기로 재설정하는 것보다 자랍니다. 그러나 막대 도구 선택을 사용하면 메모리가 증가하지 않고 얼마나 많은 픽셀이 선택되었는지에 따라 위 또는 아래로 이동합니다 (내 생각에는 정상적인 동작 임). 첫 번째 사례가 바뀔 때마다 왜 기억이 커지는지를 이해하도록 도와주세요.

P.

function isPointInPoly(poly, pt){ 
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) 
     ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) 
     && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y)/(poly[j].y - poly[i].y) + poly[i].x) 
     && (c = !c); 
    return c; 
} 

function changeHue(hue){ 
    var modifyCanvas = $("#canvas-modify").get(0); 
    var modifyContext = modifyCanvas.getContext('2d'); 
    modifyContext.clearRect(0, 0, modifyCanvas.width, modifyCanvas.height); 
    var imageData = $$.mainCanvasContext.getImageData(0, 0, $$.mainCanvasElem.width, $$.mainCanvasElem.height); 
    for(var i=0;i<imageData.data.length;i+=4) { 
     var p = {x: (i/4)%imageData.width, y: parseInt((i/4)/imageData.width)}; 
     for(var j=0;j<$$.globalSelection.length;j++){ 
      var poly = $$.globalSelection[j].slice(0, $$.globalSelection[j].length-1); 
      if(isPointInPoly(poly, p)) { 
       var hsl = rgbToHsl(imageData.data[i], imageData.data[i+1], imageData.data[i+2]); 
       hsl[0] = hue; 
       var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]); 
       imageData.data[i] = rgb[0]; 
       imageData.data[i+1] = rgb[1]; 
       imageData.data[i+2] = rgb[2]; 
      } else { 
       imageData.data[i] = 0; 
       imageData.data[i+1] = 0; 
       imageData.data[i+2] = 0; 
       imageData.data[i+3] = 0; 
      } 
     } 
    } 
    modifyContext.putImageData(imageData, 0, 0); 
} 

Answer 1

그것은 단지 당신이 아니에요 :이 크롬 고유의 "이상한"행동 여기

색조 변화의 코드라고 생각하는 이유 FF에서 그런 아무 문제가 없다, 그건.

크롬에서 메모리 누수가 발생하여 캔버스 종류가 imageData과 관련이 있습니다. 예를 들어

:

http://code.google.com/p/chromium/issues/detail?id=51171

http://code.google.com/p/chromium/issues/detail?id=20067

등

크롬의 이슈 트래커 정책 이상한입니다. 문제를 해결하더라도 문제는 해결되지 않습니다.

Chromekit이 아닌 Webkit 일 가능성이 있지만 확실하게 말할 수는 없습니다. 내가 말할 수있는 것은 당신 자신이 아무 잘못도없는 것입니다.

비록 우리는 여기 내가 당신이 일을하지 말아야 가정 해 봅시다 동안 : 성능을 위하여

var modifyCanvas = $("#canvas-modify").get(0); 
var modifyContext = modifyCanvas.getContext('2d'); 

때마다. 특히이 작업이 자주 발생하는 경우.