JavaScript函数速度慢了100倍,没有明显的原因

JavaScript函数速度慢了100倍,没有明显的原因,javascript,Javascript,我有这个功能: 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++) { fo

我有这个功能:

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');
}
函数drawRect(矩形、颜色、填充){
const width=this.width;
常数x=矩形x;
常数y=矩形y;
常数w=矩形w;
常数h=矩形h;
console.time('drawRect');
for(设y=y;y
基本上,我想做的是围绕一个大的ImageData blob编写我自己的画布式包装。(这就是
this.data
的含义。)

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

然后我将它复制到我打算在其中使用的应用程序中突然,虽然该功能继续工作,但运行速度至少慢了100倍。来自
控制台的输出。时间从~1ms变为超过100ms

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

我查看了Chrome分析工具,该函数没有显示一个表示未优化的图标

当放入较大的代码库时,什么可能导致函数运行速度慢100倍?


对不起,我不能提供MCVE。我根本无法缩小我庞大的应用程序的范围,看看它的哪一部分导致了经济放缓。事实上,这正是我想知道的,因为我甚至不知道从哪里开始寻找

啊哈!我想出来了。也许这会对将来有同样问题的人有所帮助,谁知道呢

事实证明,由于编码错误,我正在以负索引访问Uint8Array(
this.data
)。正是这种访问导致Chrome的探查器灾难性地爆炸

一次反向访问将导致功能永远被取消优化


如果你在画布上遇到优化问题,请确保你的索引没有超出范围

你有没有研究过V8引擎的优化杀手?您甚至可以显示
自包含环境
吗?
这个
属于循环中的其他内容,您可以在当前对象上设置常量,如
const this.x=rect.x等等。或者。。。在我正在测试的情况下,
rect
的维度的一个指示,rect是
{x:0,y:0,w:500,h:500}