자바스크립트 비동기처리에대해 묻고싶습니다

JavaScript
1

제가 자바스크립트로 웹 게임을 개발하고있는 개발자입니다

게임이기 때문에 프레임 드랍이 생기면 안되는상황에서

동작 시간이 꽤 오래걸리는 (대략 600ms) 함수를 수행 해야하는데

동기로하면 당연히 600ms만큼의 프레임 드랍이 생기므로

비동기로 하려고 Promise를 사용했습니다

return new Promise((resolve,reject)=>{resolve(문제의함수());});

이렇게 했는데 동기로 쓰던 비동기로 쓰던 600ms정도의 프레임드랍은 생기는것 같습니다

어떻게 해결해야할까요?

2

Promise를 써도 결국 같은 event loop에서 실행되기 때문에 실행되는 때는 달라도 결국 600ms동안 렌더링이 멈출것입니다.

Worker를 사용해 백그라운드에서 해당 작업을 진행해보시는게 어떨까요?

3

답변주셔서 감사합니다만
저는 코코스 크리에이터를 사용중인데
코코스에서는 이 작업이 힘들어보이네요ㅠㅠ
좀 더 알아보고 해야겠지만 코코스에서 컴파일 과정에
제멋대로 코드를 막 추가해서 이걸 해제하는방법부터 찾아야할것같네요…

4

JS의 이벤트 루프는 싱글 쓰레드 동기 구조라서요.
Promise는 비동기 응답에 대한 처리를 미루는 것으로 그 자체는 비동기가 아닙니다.

worker나 child process를 쓸 수 없는 상황이라면,
함수를 재귀구조로 변경하고 setTimeout을 통해서 적절히 이벤트 루프를 응답 가능한 상태로 유지할 수 있습니다.
오래 걸리는 함수의 코드 혹은 뼈대 코드를 올려보세요.

5

Promise 사용했음에도 프레임드랍이 발생하는걸 보면 스레드 부하가 심한 연산이라고 생각이 들긴 하는데요,
코드를 보니 resolve 내에서 함수를 실행하고 계신 것 같습니다.
resolve는 Promise를 종료시키고 then으로 값을 전달받을 수 있게 fulfilled 상태로 전환시키기 때문에 코드를 변경해볼 필요가 있을 것 같아요.

return new Promise((resolve, reject) => {
  const result = 문제의함수();
  resolve(result);
});

위 처럼 함수를 실행시키고 나서 결과만 리턴되도록 수행 방식을 바꿔보세요. 이렇게 해도 안된다면 web worker 사용하는 형태로 변경해야 할 것 같습니다.

6

Promise가 별도의 쓰레드에서 동작하는게 아니기 때문에 위 경우는 차이가 없습니다.