javascript 이벤트 루프를 방해하는 비동기 캔버스 작업입니다.

Question

저는 캔버스 요소를 많이 사용하는 HTML5 게임을 만들고 있습니다. 주 캔버스 요소를 업데이트 한 후 주기적으로 주요 변경 사항을 적용해야하는 연속 이벤트 루프가 있습니다. 기본적으로 캐릭터가 움직이면 배경이 업데이트됩니다. 이러한 일이 발생할 때 눈에 띄는 일시 중지가 발생하므로 비동기 함수로 작업을 수행하려고 시도했지만 정확히 동일한 성능을 발휘하는 것처럼 보입니다. 비동기 함수에서 모든 작업을 보이지 않는 캔버스로 수행 한 다음 나중에 이벤트 루프에서 주 캔버스로 복사하는 작업을 시도했지만 성능이 향상되지 않았습니다.

나는 내가 말하고있는 행동을 되풀이하는 것처럼 보이는 무의미한 작은 프로그램을 작성했다. 비동기 함수에서도 캔버스 요소를 묶는 것이 나머지 프로그램에 영향을주는 것처럼 보입니다.

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var ImDat=ctx.createImageData(1000,1000); 
var ticker = 0; 

ImDat.setPixel=function(x,y,c){ 
    var i=(x+y*this.width)*4; 
    this.data[i]=c.R; 
    this.data[i+1]=c.G; 
    this.data[i+2]=c.B; 
    this.data[i+3]=c.A; 
} 

var bigOperation = function() { 
    for (var i = 0; i < 20; i++) { 
     lilOperation(); 
    } 
    console.log(new Date + 'big op done'); 
} 

var lilOperation = function() { 
    for (var i = 0; i < canvas.width; i++) { 
     for (var j = 0; j < canvas.height; j++) { 
     ImDat.setPixel(i, j, { R: Math.random() * 256, G: Math.random() * 256, B: Math.random() * 256, A: 256 }); 
     } 
    } 
    ctx.putImageData(ImDat, 0, 0); 
} 

var eventLoop = function() { 
    if (ticker == 50) { 
     ticker = 0; 
     console.log(new Date + 'big op start'); 
     window.setTimeout(bigOperation, 1);      
    } else { 
     ticker++; 
    } 
     lilOperation(); 
     console.log(new Date + 'normal loop'); 
} 

window.setInterval(eventLoop, 10); 

bigOperation 함수가 호출 될 때까지 일관된 시간 간격이 기록됩니다.이 시점에서 이벤트 루프가 잠시 멈 춥니 다. 꽤 엉뚱한 시스템에서이 작업을하고 있으므로 bigOperation에서 반복 횟수를 늘려야 효과를 얻을 수 있습니다.

감사합니다.

Answer 1

setTimeout을 사용하더라도 함수 호출이 완료 될 때까지 실행이 잠기므로 자바 스크립트의 특성 일뿐입니다. 이것은 실제로 일을 상당히 단순화하기 때문에 저주보다 더 큰 축복입니다.

Javascript의 단일 스레드 특성으로 인해 "웹 근로자"라고하는 것이 발명되었습니다. 이것은 브라우저의 비교적 새로운 기능이지만 메인 스레드를 잠그지 않고 별도로 실행되는 작업을 수행 할 수 있습니다. In moderna browsers, you can perform canvas tasks using web workers.

게임에 대해 모르는 사이에, 실행하는 데 오랜 시간이 걸리는 무거운 함수를 호출 할 필요없이 달성하려는 것 (배경 그래픽 업데이트, 문자 이동 등)이 가능해야합니다. 픽셀 단위로 많은 작업을 수행하고 있습니까? 그렇다면 다른 방법으로 할 수 없습니까? 실제로 웹 작업자를 사용하기 전에 코드를 최적화하기 시작합니다.