Chrome脚本内存优化

Question

我有一个脚本，用于html5画布元素中的像素。Google也有一些奇怪的行为(版本:17.0.942.0dev)。我有两种像素操作：

• 通过魔杖工具

改变特定多边形

• 像素内像素的色调

问题是，当我改变色调时，该选项卡的内存在每次更改250 is (有时甚至更多)之后就会增长，而不是重新调整到初始大小。但是当我使用魔杖工具选择时，内存不会增长，它会上升还是下降，取决于选择了多少像素(在我看来，这是正常的行为)。请帮助我理解为什么在第一次改变之后，记忆就会增长。

在FF中没有这样的问题，所以我认为这是Chrome特有的“奇怪”行为。

以下是色调变化的代码：

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

不仅仅是你。

Chrome中出现了断断续续的内存泄漏，任何与画布imageData相关的内容都是如此。

例如：

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

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

等。

铬的问题追踪器政策很奇怪。这些问题不一定是固定的，即使它们已经解决了问题。

这可能是一个webkit的东西，而不是Chrome的东西，但我不能肯定。我只能说你自己并没有做错什么。

不过，当我们在这里的时候，让我说你不应该这样做：

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

每次都是为了表演。尤其是如果这个手术经常发生。