我还可以为此功能做更多优化吗？

Question

我正在编写的图形库（用于 JavaScript/canvas，使用 ImageData）中有一个简单的框模糊功能。

我做了一些优化以避免堆积冗余代码，例如循环遍历通道的 [0..3] 而不是复制代码，以及使用单个未复制的每个周围像素实现代码行，最后取平均值。

这些优化是为了减少冗余代码行。我是否可以做任何进一步的优化，或者更好的是，我可以更改任何可以提高函数本身性能的事情？

在使用 Core 2 Duo 的 200x150 图像区域上运行此函数，在 Firefox 3.6 上大约需要 450 毫秒，在 Firefox 4 上大约需要 45 毫秒，在 Chromium 10 上大约需要 55 毫秒。

各种注释

• expressive.data.get 返回一个 ImageData 对象
• expressive.data.put 将 ImageData 的内容写回画布
• ImageData< /code> 是一个对象：
  • 无符号长宽
  • 无符号长高度
  • 数组数据，格式为r, g, b, a, r, g, b, a ...的一维数据

代码

expressive.boxBlur = function(canvas, x, y, w, h) {
    // averaging r, g, b, a for now
    var data = expressive.data.get(canvas, x, y, w, h);
    for (var i = 0; i < w; i++)
        for (var j = 0; j < h; j++)
            for (var k = 0; k < 4; k++) {
                var total = 0, values = 0, temp = 0;
                if (!(i == 0 && j == 0)) {
                    temp = data.data[4 * w * (j - 1) + 4 * (i - 1) + k];
                    if (temp !== undefined) values++, total += temp;
                }
                if (!(i == w - 1 && j == 0)) {
                    temp = data.data[4 * w * (j - 1) + 4 * (i + 1) + k];
                    if (temp !== undefined) values++, total += temp;
                }
                if (!(i == 0 && j == h - 1)) {
                    temp = data.data[4 * w * (j + 1) + 4 * (i - 1) + k];
                    if (temp !== undefined) values++, total += temp;
                }
                if (!(i == w - 1 && j == h - 1)) {
                    temp = data.data[4 * w * (j + 1) + 4 * (i + 1) + k];
                    if (temp !== undefined) values++, total += temp;
                }
                if (!(j == 0)) {
                    temp = data.data[4 * w * (j - 1) + 4 * (i + 0) + k];
                    if (temp !== undefined) values++, total += temp;
                }
                if (!(j == h - 1)) {
                    temp = data.data[4 * w * (j + 1) + 4 * (i + 0) + k];
                    if (temp !== undefined) values++, total += temp;
                }
                if (!(i == 0)) {
                    temp = data.data[4 * w * (j + 0) + 4 * (i - 1) + k];
                    if (temp !== undefined) values++, total += temp;
                }
                if (!(i == w - 1)) {
                    temp = data.data[4 * w * (j + 0) + 4 * (i + 1) + k];
                    if (temp !== undefined) values++, total += temp;
                }
                values++, total += data.data[4 * w * j + 4 * i + k];
                total /= values;
                data.data[4 * w * j + 4 * i + k] = total;
            }
    expressive.data.put(canvas, data, x, y);
};

Answer 1

小幅优化：

var imgData = expressive.data.get(canvas, x, y, w, h);
var data = imgData.data;

// in your if statements
temp = data[4 * w * (j - 1) + 4 * (i - 1) + k];

expressive.data.put(canvas, imgData, x, y) 

您还可以在索引中执行一些小幅优化，例如：

4 * w * (j - 1) + 4 * (i - 1) + k // is equal to
4 * ((w * (j-1) + (i-1)) + k

var jmin1 = (w * (j-1))
var imin1 = (i-1)
//etc, and then use those indices at the right place

另外，在代码中的每个 for 语句后面放置 {}。额外的 2 个字符不会产生太大的影响。潜在的错误会。

Answer 2

您可以提取一些常见的表达式：

for (var i = 0; i < w; i++) {
    for (var j = 0; j < h; j++) {
        var t = 4*w*j+4*i;
        var dt = 4*j;
        for (var k = 0; k < 4; k++) {
            var total = 0, values = 0, temp = 0;
            if (!(i == 0 && j == 0)) {
                temp = data.data[t-dt-4+k];
                if (temp !== undefined) values++, total += temp;
            }
            if (!(i == w - 1 && j == 0)) {
                temp = data.data[t-dt+4+k];
                if (temp !== undefined) values++, total += temp;
            }
            if (!(i == 0 && j == h - 1)) {
                temp = data.data[t+dt-4+k];
                if (temp !== undefined) values++, total += temp;
            }
            if (!(i == w - 1 && j == h - 1)) {
                temp = data.data[t+dt+4+k];
                if (temp !== undefined) values++, total += temp;
            }
            if (!(j == 0)) {
                temp = data.data[t-dt+k];
                if (temp !== undefined) values++, total += temp;
            }
            if (!(j == h - 1)) {
                temp = data.data[t+dt+k];
                if (temp !== undefined) values++, total += temp;
            }
            if (!(i == 0)) {
                temp = data.data[t-4+k];
                if (temp !== undefined) values++, total += temp;
            }
            if (!(i == w - 1)) {
                temp = data.data[t+4+k];
                if (temp !== undefined) values++, total += temp;
            }
            values++, total += data.data[t+k];
            total /= values;
            data.data[t+k] = total;
        }
    }
}

您可以尝试将循环移至 k 上，使其位于最外层，然后将 +k 折叠到 t 的定义中code>，节省了一点重复计算。 （由于内存局部性原因，这可能会变得很糟糕。）

您可以尝试将 j 上的循环移动到 i 上的循环之外，这会给您带来更好的结果内存局部性。这对于大图像来说更重要；对于您使用的尺寸来说可能根本不重要。

相当痛苦，但可能非常有效：通过将循环拆分为 {0,1..w-2,w-1} ​​和 {0,1..h-2,h-1} ，您可能会丢失大量条件操作。

您可以摆脱所有这些未定义测试。鉴于您正在进行所有这些范围检查，您真的需要它们吗？

避免范围检查的另一种方法：您可以沿着每个边缘填充图像（用零）一个像素。请注意，执行此操作的明显方法将给出与边缘现有代码不同的结果；这可能是一件好事，也可能是一件坏事。如果这是一件坏事，您可以计算出适当的值来除以。

Answer 3

temp = 0 的声明不是必须的，只需编写 var Total = 0,values = 0, temp; 即可。

接下来是向后循环。

var length = 100,
    i;

for (i = 0; i < length; i++) {}

慢于

var length = 100;

for (; length != 0; length--) {}

第三个技巧是使用 Duffy's Device 进行巨大的 for 循环。

Answer 4

也许（只是也许）尽可能移动 if 检查将是一个优势。让我展示一些伪代码：

为了简单起见，我将在 k 上循环的代码称为“内循环”。

// do a specialized version of "inner loop" that assumes i==0
for (var i = 1; i < (w-1); i++)
     // do a specialized version of "inner loop" that assumes j==0 && i != 0 && i != (w-1)
     for (var j = 1; j < (h-1); j++)
        // do a general version of "inner loop" that can assume i != 0 && j != 0 && i != (w-1) && j != (h-1)
     }
     // do a specialized version of "inner loop" that assumes j == (h - 1) && i != 0 && i != (w-1)
}
// do a specialized version of "inner loop" that assumes i == (w - 1)

这将大大减少 if if 检查的数量，因为大多数操作都不需要它们。

Answer 5

如果使用 var data 的唯一方式是作为 data.data 那么您可以将：更改

var data = expressive.data.get(canvas, x, y, w, h);

为：

var data = expressive.data.get(canvas, x, y, w, h).data;

并将每一行更改为：更改

temp = data.data[4 * w * (j - 1) + 4 * (i - 1) + k];

为：

temp = data[4 * w * (j - 1) + 4 * (i - 1) + k];

这样您将保存一些名称查找。

可能有更好的方法来优化它，但这只是我首先注意到的。

更新：

此外，if (i != 0 || j != 0) 可能比 if (!(i == 0 && j == 0)) 不仅因为否定，还因为它可以短路。

（使用 == 与 === 和 != 与 !== 进行自己的实验，因为我的快速测试显示的结果对我来说似乎违反直觉。）

而且有些测试进行了多次，有些 if 是相互排斥的，但无论如何都在没有 else 的情况下进行了测试。您可以尝试重构它，使用更多嵌套的 if 和更多的 else if。