Słabe działanie aplikacji na starszych przeglądarkach. Problem dziwnym zapychaniem ramu przez skrypt.

Question

Cześć wszystkim.

Napisałem ostatnio mały skrypt do chodzenia po mapie w orientacji ortogonalnej. Na windowsie 10 i przeglądarkach: firefox, chrome, opera, edge wszystko działa bardzo płynnie i bez mniejszego problemu, ale po teście na windowsie 7 i chrome wszystko działa dużo gorzej, są jakieś przycinki i zauważyłem, że animacja wykonuje się jakby wolniej.

Drugi problem jest taki, że w losowych momentach skrypt zaczyna zżerać mi bardzo dużo ramu, aż w końcu przeglądarka się zawiesza. Testowałem to na chromie i ff. Raz można używać skryptu bez problemu po 2 godziny, a raz ledwo go uruchomię i zwiecha, bo cały ram nie wiadomo dlaczego się zapełnił.

Spotkał się ktoś z czymś takim? Jak można to rozwiązać?

edit:

Zapomniałem dodać kodu:d

https://jsfiddle.net/Lztwwb3p/

Comments

W Dev Toolsach przeglądarki Chrome możesz sprawdzić ilość zużytego RAMu dla poszczególnych funkcji:

https://developers.google.com/web/tools/chrome-devtools/memory-problems/

https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots

Pozwoli to zlokalizować wycieki pamięci, dzięki czemu będziesz mógł usprawnić kod, aby ich uniknąć lub, przynajmniej, zminimalizować. Możesz w tym celu zastosować technikę tzw. object poling.

---

Hmm. Dzięki, pokombinuję coś z tym.

Answer 1

Poczytałem jakieś artykuły o podobnej tematyce do mojego problemu i doszedłem do wniosku, że źle zrobiłem pętlę główną gry. W jednym z artykułów które przeczytałem znalazłem przykład pętli która pomimo zmian FPS ciągle animuje tak samo.

fps =  {
        lastFrameTimeMs: 0,
        maxFPS: 60,
        delta: 0,
        timestep: 1000 / 60,
        fps: 60,
        framesThisSecond: 0,
        lastFpsUpdate: 0
    }

function GameLoop(timestamp){
    _t = this;
    
    if(timestamp < g.fps.lastFrameTimeMs + (1000 / g.fps.maxFPS)){
        requestAnimationFrame(GameLoop);
        return;
    }
    g.fps.delta += timestamp - g.fps.lastFrameTimeMs;
    g.fps.lastFrameTimeMs = timestamp;

    if(timestamp > g.fps.lastFpsUpdate + 1000){
        g.fps.fps = 0.25 * g.fps.framesThisSecond + 0.75 * g.fps.fps;

        g.fps.lastFpsUpdate = timestamp;
        g.fps.framesThisSecond = 0;
    }
    g.fps.framesThisSecond++;

    var numUpdateSteps = 0;
    while(g.fps.delta >= g.fps.timestep){
        _t.g.hero.go(g.fps.timestep);
        g.fps.delta -= g.fps.timestep;
        if(++numUpdateSteps >= 240){
            panic();
            break;
        }
    }
    $(".fps").html("FPS: " + parseInt(g.fps.fps));
    g.draw.HeroAnimation();
    g.draw.MapAnimation();
    g.keyboard.UseKey();

    if(!isset(this.g.cookie)){
        if(g.fps.fps < 35){
            if(g.setting.quality == 1){
                LowSettings();
            }
        }else if(g.fps.fps > 35){
            if(g.setting.quality == 0){
                NormalSettings();
            }
        }
    }

    req = requestAnimationFrame(GameLoop);
}

function StartGameLoop(){
    req = requestAnimationFrame(GameLoop);
}

Jednak pomimo tej zmiany animacja dalej wygląda tragicznie na komputerach innych niż te z windowsem 10. Czy mógłby mnie ktoś naprowadzić, jak powinno się taką pętle dobrze napisać? Albo chociaż jaki błąd popełniam w tym wypadku