Spiel des Lebens in React/Redux, Hilfe bei der Steigerung der Leistung

Question

Ich arbeite an einer Version von The Game of Life in reagieren/redux/javascript, während ich es arbeiten die Leistung ist schrecklich.

Here is a link to the running game Here's the source on githhub

Im Moment bin ich bei jedem Tick (250,500,750ms veränderbar durch den Benutzer), um den Zustand jeder Zelle zu aktualisieren. Dafür durchlaufe ich ein Array von Objekten, die jede Zelle repräsentieren. Innerhalb jedes Objekts befindet sich ein Parameter namens status, der eine Ganzzahl von 1 für lebend oder 0 für tot sein kann.

Ich ziehe dann in drei Reihen von drei Zellen, für die oben genannten mittleren und unteren Reihen um die Zelle in Frage, ich summiere dann diese Werte (mit Ausnahme der Zelle selbst in der Mitte).

Ich führe diese Nummer dann durch einen Wenn/Dann-Fluss, um den neuen Zustand dieser Zelle zu entscheiden.

Dieser Prozess wird dann für jede einzelne Zelle in der Anwendung wiederholt. Sobald es fertig ist, wird der neue Status jeder Zelle mit redux gesendet und die Komponenten werden nach Bedarf aktualisiert.

In der tatsächlichen Ansicht ist jede Zelle eine reagierende Komponente, die ihren Status als eine Prop von dem Container erhält, der das Raster ist. Ich habe shoulComponentRender() eingerichtet, um die Zelle nur dann neu zu rendern, wenn sich der Status des Lebens ändert.

Ich denke von Profiling der App (die ich nicht sehr klar/gut bin), dass es der Prozess der Berechnung aller Werte ist, die Dinge verlangsamt, aber ich könnte falsch liegen und es könnte die React-Komponenten sein das verursacht das Problem.

Jede Hilfe/Unterstützung geschätzt!

Answer 1

Also am Ende nie die Leistung auf ein befriedigendes Niveau bekam die DOM und HTML-Komponenten. Also habe ich den Grid-Code neu geschrieben, um alle Zellen mit HTM5-Canvas zu rendern, und die Performance ist kein Problem mehr, tatsächlich rendert es nun auf dem iPhone recht glücklich.

Answer 2

Ich denke, das könnte das Problem sein. Durch die Profilierung wir sehen:

Sie haben platzen die Arbeit mit einem regelmäßigen Intervall, die jeweils unter etwa 85 ms, was sehr abnormal ist. Wenn man den Call-Stack nach unten schaut, gibt es eine triggerTimer und eine nachfolgende startTimer Funktionsaufrufe.

Blick auf den Quellcode für diese: https://github.com/gazzer82/fcc-game-of-life/blob/a4a000a6cafa5877a4a15e59cec5184076905cc4/src/containers/lower_buttons.jsx#L12.

Sie müssen von startTimer in den Zustand zurückkehren. Sonst rufen triggerTimer und startTimer einander so schnell an, wie sie können immer und immer wieder, jedes Mal neue Timeouts hervorbringen.

Vor

startTimer(){ 
    var that = this; 
    if(this.props.controls.game === 'running'){ 
     this.props.stepState(); 
    } 
    setTimeout(() => this.triggerTimer(), this.props.controls.speed); 
    } 

    triggerTimer(){ 
    this.startTimer(); 
    } 

Nach

startTimer(){ 
    var that = this; 
    if(this.props.controls.game === 'running'){ 
    this.props.stepState(); 
    // Return here 
    return; 
    } 
    setTimeout(() => this.triggerTimer(), this.props.controls.speed); 
} 

triggerTimer(){ 
    this.startTimer(); 
}