このfloodFillアルゴリズムを最適化するにはどうすればよいですか？アドバイスが必要

Question

私は次のコードを使っています。ここで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; 
    } 
} 

私はジャバスクリプト/ jqueryのとアルゴリズムを学習に取り組んできたと私はかなり、私は深く得るという事実を除いて、このクローンが働いていましたし、より深くグリッドに入ると、コードは遅くて遅くなります。私はメモ帳について読んでいて、グリッド上で使ってみようとしていましたが、私はどのようにアプローチするかについて固執しています。私が本当に探しているのは、これをどうやって行うのかについてちょっとお勧めです。たぶんmemoizationは行く方法ではないと私は他の方法で私のコードを最適化することができます。私の現在の考えは、最後の灰色の四角形をつかんでそこから進む必要があるということです。正しい軌道にいるのですか？

----編集------

私は灰色または選択した色

Answer 1

からの読み取りとDOMへの書き込みをマッチングをチェックするif/elseオペレータが非常にある組み合わせることができますことに気づきましたJavascriptで高価です。また、データのソースとしてDOMを使用しないでください。

アルゴリズムを高速化するには、ピクセルデータを通常のJavascriptデータとしてオフラインで保存し、データのみを操作してからビジュアルコードを1回更新します。これにより、DOM操作の数を最小限に抑えることができます。

さらに、Javascriptは「テールコール最適化」ではなく、永遠に再帰することはできず、すべてのレベルの再帰によってプログラムがある程度遅くなります。この場合、再帰的でないフラッドフィルアルゴリズムを使用することができれば、より高速になる可能性があります。