Question

我有这个功能：

function drawRect(rect, color, filled) {
    const width = this.width;
    const x = rect.x;
    const y = rect.y;
    const w = rect.w;
    const h = rect.h;

    console.time('drawRect');
    for (let _y = y; _y < y + h; _y++) {
      for (let _x = x; _x < x + w; _x++) {
         this.data[(_x + this.width * _y) * 4 + 0] = color.red;
         this.data[(_x + this.width * _y) * 4 + 1] = color.green;
         this.data[(_x + this.width * _y) * 4 + 2] = color.blue;
         this.data[(_x + this.width * _y) * 4 + 3] = color.alpha * 255;
      }
    }
    console.timeEnd('drawRect');
}

基本上我要做的就是在一个大的ImageData blob周围编写我自己的类似Canvas的包装器。（那是this.data的原因。）

我在一个自包含的环境中编写了这个函数并对其进行了测试。它运行得非常快（一般不到1毫秒）。

然后我将其复制到我打算使用的应用程序中。突然，虽然该功能继续有效，但运行速度至少慢了100倍。 console.time的输出从1毫秒到超过100毫秒。

我在小应用程序和大型应用程序中使用完全相同的参数对其进行了测试。在较大的应用程序中，此函数的完全相同的调用运行速度慢100倍。

我查看了Chrome分析工具，但该功能没有显示图标，表明它未被优化。

当放入更大的代码库时，什么可能导致函数运行速度减慢100倍？

对不起，我无法提供MCVE。我根本无法缩小我的巨大应用程序，看看它的哪一部分导致了减速。事实上，这正是我想知道的，因为我不知道哪里可以开始寻找。

Answer 1

啊哈！我想到了。也许这会帮助将来有同样问题的人，谁知道。

由于编码错误，我发现我正在以负索引访问Uint8Array（match 'duration' => "=users##{DUTATION.call}", via: [:get, :post]）。正是这种访问导致Chrome的分析器发生灾难性爆炸。

单否定访问权限将导致该功能永远不被优化

如果您遇到Canvas内容的优化问题，请确保您没有索引越界！

没有明显的原因，JavaScript函数会慢100倍

1 个答案: