생명의 게임/Redux, 성능 향상에 도움이

Question

나는 게임의 반응/redux/javascript의 버전에서 일하고 있는데, 그 동안 성능은 끔찍합니다. 순간 Here's the source on githhub

Here is a link to the running game

, 난 각 셀의 상태를 업데이트 할 때마다 눈금 (사용자에 의한 변경 250,500,750ms)에서이다. 그 때문에 각 셀을 나타내는 객체 배열을 반복합니다. 각 객체 내에는 status라는 매개 변수가 있습니다.이 매개 변수는 살아있는 경우에는 1, 죽은 경우에는 0이 될 수 있습니다.

3 셀 3 행을 가져옵니다. 위의 중간 및 아래쪽 행에 대해 문제의 셀 주위에 값을 합계합니다 (가운데 셀 제외).

그런 다음 해당 셀의 새 상태를 결정하기 위해 if/then 플로우를 통해 해당 번호를 실행합니다.

이 프로세스는 응용 프로그램의 모든 단일 셀에 대해 반복됩니다. 완료되면 각 셀의 새 상태가 redux를 사용하여 전달되고 필요에 따라 구성 요소가 업데이트됩니다.

실제보기에서 각 셀은 격자 인 컨테이너에서 소품으로 상태를 수신하는 반응 구성 요소입니다. 생명 상태가 변경 될 때만 셀을 다시 렌더링하도록 shoulComponentRender()를 설정했습니다.

나는 앱을 프로파일 링하는 것으로부터 (나는 분명히/좋지 않다) 모든 것을 계산 속도가 느려지는 것으로 생각하지만, 잘못 될 수 있으며, 반응 요소가 될 수있다. 문제를 일으키는

도움/도움을 주시면 감사하겠습니다.

Answer 1

후 전에. 그래서 저는 HTM5 Canvas를 사용하여 모든 셀을 렌더링하기 위해 그리드 코드를 다시 작성했습니다. 이제는 성능이 더 이상 문제가되지 않습니다. 실제로는 iPhone에서 매우 행복하게 렌더링됩니다.

Answer 2

이것이 문제 일 수 있다고 생각합니다. 프로파일함으로써 우리는 다음을 참조하십시오

당신은 규칙적인 간격으로 작업 버스트가 각각 약 85ms 매우 비정상 인을 복용. 호출 스택을 내려다 보면 triggerTimer과 그 다음에 startTimer 함수 호출이 있습니다.

소스 코드를 보면 : https://github.com/gazzer82/fcc-game-of-life/blob/a4a000a6cafa5877a4a15e59cec5184076905cc4/src/containers/lower_buttons.jsx#L12입니다.

startTimer에서 반환해야합니다. 그렇지 않으면 triggerTimer과 startTimer은 매번 새로운 시간 제한을 생성하여 계속해서 서로를 호출 할 수 있습니다.

그래서 결국 DOM 및 HTML 구성 요소를 사용하여 만족스러운 수준으로 성능을 가진 적이 없어

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

    triggerTimer(){ 
    this.startTimer(); 
    } 

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(); 
}