javascript - 如何优化此 floodFill 算法？需要建议

Question

我有以下代码的 fiddle 。 ColorWalk clone

这是js代码:

function floodFill(x, y, selectedColor, grayColor) {
  if (x < 0 || x >= 600) return;
  if (y < 0 || y >= 400) return;
  let square = $('.blockattribute').filter(function(ind, el) {
    return $(el).css('left') == x + 'px' && $(el).css('top') == y + 'px'
  });
  let squareColor = square.css('background-color');
  if (squareColor === grayColor || squareColor === selectedColor) {
    square.removeClass().addClass('blockattribute gray');
    floodFill(x + 20, y, selectedColor, grayColor);
    floodFill(x, y + 20, selectedColor, grayColor);
    floodFill(x - 20, y, selectedColor, grayColor);
    floodFill(x, y - 20, selectedColor, grayColor);
  }
  else {
    return;
  }
}

我一直在努力学习 javascript/jquery 和算法，我几乎已经让这个克隆工作了，除了当我越来越深入网格时，代码越来越慢。我一直在阅读有关内存的内容并尝试在网格上使用它，但我对如何处理感到困惑。我真正想要的只是关于如何做到这一点的一点插入。也许内存不是可行的方法，也许我可以通过其他方式优化我的代码。我目前的想法是，我需要捕获最后一个灰色方 block ，然后从那里继续。我走在正确的轨道上吗？

----编辑------

我意识到我可以结合 if/else 运算符来检查匹配的灰色或选定的颜色

Answer 1

在 Javascript 中读取和写入 DOM 的开销非常大。您也不应使用 DOM 作为数据源。

为了加快您的算法，将像素数据离线存储为常规 Javascript 数据，仅操作数据，然后仅更新一次视觉代码。通过这种方式，您可以最大限度地减少 DOM 操作的数量。

此外，Javascript 不是“尾调用优化”，这意味着您不能永远递归，递归的每一层都会在某种程度上减慢程序速度。如果您可以在这种情况下使用非递归洪水填充算法，它可能会更快。