两个几乎相似的while循环之间的处理差异非常大

Question

我正在编写一个函数,逐个像素地将图像绘制到画布元素.我注意到有一点,功能突然变得比以前更长 - 特别是从338x338像素画布到339x339像素画布.

将类似的函数放入jsfiddle,我得到相同的结果.while循环处理一个338x338的数组需要大约.6-7秒,而339x339的阵列大约需要6到9秒.24-25秒.

这种情况发生在Chrome上.在Firefox中,两者都需要大约.16秒

这是小提琴:http: //jsfiddle.net/8pb89/5/

代码如下所示:

var ary1 = [];
var ary2 = [];
var mapData = {};
var colorMatrix = {};

for (var i = 0; i < (338 * 338); i++) {
    ary1.push([i, i + 2]);
}

for (var i = 0; i < (339 * 339); i++) {
    ary2.push([i, i + 2]);
}

//Light operation
function test(i, j) {
    return Math.floor((i * j + i + j) / j);
}

//Heavy operation on objects
function calcTest(ary){
    var point = ary.splice(0, 1);
    var i = point[0];
    var j = point[1];

    if (!mapData[i]) {
        mapData[i] = [];
    }
    if (!mapData[i][j]) {
        mapData[i][j] = [];
    }

    mapData[i][j]["one"] = test(i, j);
    mapData[i][j]["two"] = test(i, j);

    colorMatrix[mapData[i][j]["two"]] = mapData[i][j]["one"];

}

var len = ary1.length;
var start = new Date().getTime();

while (len--) {
    calcTest(ary1);
}

var end = new Date().getTime();
var time = end - start;
alert('Execution for 338x338: ' + time);

var len2 = ary2.length;
obj = {};
obj2 = {};

start = new Date().getTime();
while (len2--) {
    calcTest(ary2);
}
end = new Date().getTime();
time = end - start;
alert('Execution for 339x339: ' + time);

这是Chrome上的javascript内存问题,还是我对这些对象做错了？有没有办法避免这个更高的处理持续时间？

Answer 1

我猜它是以下一项或两项。

• Chrome 正在调整底层哈希表的大小，介于338 * 338和之间339 * 339。
• 垃圾收集是在同一时间范围内发生的。

我怀疑这是内存问题。