Код JavaScript выполняется быстро в Chrome, но занимает больше времени в Firefox ⇐ Javascript

[Anonymous]

У меня есть два полных изображения, и мне нужно сравнить различия в пикселях и сохранить результат как третье изображение. Логика этого реализована в сценарии содержимого расширения Chrome, куда я передаю строки base64 для двух изображений. В своем коде я перебираю каналы RGBA для сравнения пикселей. В Chrome этот процесс занимает около 10–15 мс, а в Firefox тот же код занимает 350–400 мс. Я не уверен, почему существует такой большой разрыв в производительности — может ли это быть связано с разными движками JavaScript, используемыми в двух браузерах?

Код: Выделить всё

async function createDeltaImageFromBase64(currentImageBase64, previousImageBase64) {
// Load images using base64 data URIs
const currentImage = await loadImage(currentImageBase64);
const previousImage = await loadImage(previousImageBase64);

// Ensure the dimensions match
const width = Math.min(currentImage.width, previousImage.width);
const height = Math.min(currentImage.height, previousImage.height);

// Create a canvas for the delta image
const canvas = createCanvas(width, height);
const ctx = canvas.getContext('2d');

// Draw the current image on the canvas
ctx.drawImage(currentImage, 0, 0, width, height);
const currentImageData = ctx.getImageData(0, 0, width, height);

// Draw the previous image on a temporary canvas
const tempCanvas = createCanvas(width, height);
const tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(previousImage, 0, 0, width, height);
const previousImageData = tempCtx.getImageData(0, 0, width, height);

// Create the delta image
const deltaImageData = ctx.createImageData(width, height);
const { data: currentData } = currentImageData;
const { data: previousData } = previousImageData;
const { data: deltaData } = deltaImageData;

for (let i = 0; i < currentData.length; i += 4) {
// Compare RGBA channels
const isDifferent =
currentData[i] !== previousData[i] ||
currentData[i + 1] !== previousData[i + 1] ||
currentData[i + 2] !== previousData[i + 2] ||
currentData[i + 3] !== previousData[i + 3];

if (isDifferent) {
// Copy current image pixel
deltaData[i] = currentData[i];       // Red
deltaData[i + 1] = currentData[i + 1]; // Green
deltaData[i + 2] = currentData[i + 2]; // Blue
deltaData[i + 3] = currentData[i + 3]; // Alpha
} else {
// Set to transparent
deltaData[i] = 0;
deltaData[i + 1] = 0;
deltaData[i + 2] = 0;
deltaData[i + 3] = 0;
}
}

// Put the delta image data back on the canvas
ctx.putImageData(deltaImageData, 0, 0);

// Return the delta image as a base64 string
return canvas.toDataURL(); // Returns a base64 data URI

}

Подробнее здесь: https://stackoverflow.com/questions/797 ... in-firefox