Оптимизация памяти скриптов для Chrome

Question

У меня есть скрипт, который работает с пикселями в элементе холста html5.И в Google Chrome есть странное поведение (версия: 17.0.942.0 dev).У меня есть 2 вида операций с пикселями:

• изменение оттенка пикселей внутри определенного полигона
• выбор пикселей с помощью инструмента палочки

Проблема заключается в том, когдаЯ меняю оттенок, память каждой вкладки увеличивается после каждого изменения до 250 МБ (иногда даже больше), а затем сбрасывается до первоначального размера.Но когда я использую инструмент выбора палочки, память не увеличивается, она увеличивается или уменьшается в зависимости от того, сколько пикселей выбрано (на мой взгляд, это нормальное поведение).Пожалуйста, помогите мне понять, почему память увеличивается после каждого изменения в первом случае.

PS в 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

и т. Д.

Политики отслеживания проблем Chromium странные.Проблемы не обязательно устраняются, даже если они закрывают их.

Возможно, это веб-набор, а не Chrome, но я не могу сказать наверняка.Все, что я могу сказать, это то, что вы сами не делаете ничего плохого.

Хотя пока мы здесь, позвольте мне сказать, что вам не следует делать это:

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

Каждый раз,ради производительности.Особенно, если эта операция происходит часто.