我正在寫一個函數,它會逐個像素地將圖像繪製到畫布元素。我注意到有一點,函數突然花了比以前更長的時間 - 特別是從338x338像素畫布到339x339像素畫布。兩個幾乎相似的循環之間的非常高的處理差異
把一個類似的功能放到jsfiddle中,我得到了同樣的結果。 while循環處理一個338x338的數組需要約。 6-7秒,而339x339的陣列需要約。 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,還是我做一些錯誤的對象呢?有沒有辦法避免這個更高的處理時間?
有趣。 http://jsperf.com/chrome-loops-test – climbage
我不知道這是應該做什麼,但在'calcTest'函數中有很多錯誤。你想介紹一下嗎? – Bergi
小提琴只是我的功能的簡化版本,所以我可以測試338x338和339x339陣列之間的區別。在最終的程序中,數組(ary1/ary2)包含尚未處理的座標。 calcTest函數計算座標的像素顏色,並將數據存儲在mapData對象和colorMatrix對象中(在上例中重命名) – LongInt