Javascript에서 멀티 스레드 활용 - WebWorkers나 WebAssembly에 관한 것이 아닙니다.

JavaScript가 단일 스레드에서 실행된다는 것은 잘 알려져 있습니다. 이 개념은 너무나 중요해서 우리는 종종 메인 스레드라는 이름으로 언급합니다. 그렇다면 JavaScript를 실행할 때 멀티코어 CPU가 쓸모없다는 뜻인가요?

그렇지 않습니다.

JavaScript는 스레드에 대해 혼합된 메시지를 보내는 다소 뻔뻔할 수 있습니다.

하지만 Web Workers 및 WebAssembly와 같은 더 복잡한 기능을 자세히 살펴보지 않고도 기본 JavaScript로 멀티스레드 워크플로를 활용할 수 있습니다.

분명히 말하자면 이 기사는 웹 브라우저 기반 JavaScript에 중점을 두고 있습니다. Node.js와 같은 다른 환경에서는 상황을 다르게 처리할 수 있습니다.

JavaScript에서 다중 스레드 및 다중 스레드 유사 작업에 대한 옵션을 살펴보겠습니다. 현실은 기본적이고 순수한 바닐라 JavaScript에서 멀티스레드 워크플로를 활용할 수 있고 활용해야 한다는 것입니다.

"설명하다!"

반갑습니다.

JavaScript는 단일 스레드 언어이지만 웹 브라우저에서 해석되며 브라우저는 다중 스레드 소프트웨어입니다.

멀티스레딩을 시뮬레이션하고 활용하는 방법에는 여러 가지가 있는데, 자신도 모르게 사용하고 있을 수도 있습니다.

게다가 JavaScript는 실제로는 그렇지 않지만 멀티스레드처럼 보이는 방식으로 작동하는 경우가 많습니다. 부정 행위처럼 들릴 수도 있지만 멀티 스레드 동작에서 기대하는 이점을 효과적으로 전달합니다.

이벤트 기반 프로그래밍은 멀티스레드로 느껴집니다.

JavaScript는 이벤트 기반 시스템입니다. 브라우저가 JavaScript 파일을 처리할 때 내부의 모든 코드를 실행합니다. 실행이 중단되지 않는 코드를 작성하는 것은 전적으로 가능합니다. 하지만 브라우저가 중단될 수 있으므로 일반적으로 좋지 않은 생각입니다.

우리가 일반적으로 하는 일은 이벤트 리스너를 설정하고 어떤 일이 일어나기를 기다리는 것입니다. 이 시점에서 JavaScript는 완전히 유휴 상태입니다. 메인 스레드에서 일부 작업을 오프로드하지 않으면 이러한 유휴 대기는 불가능합니다.

이벤트 자체는 멀티스레드가 아니지만 이벤트 대기 및 확인은 JavaScript가 아닌 브라우저에서 처리됩니다. 이 프로세스는 메인 스레드에서 오프로드됩니다.

비동기 함수 및 멀티스레딩

setTimeout 및 setInterval과 같은 함수는 수년 동안 우리와 함께해 왔습니다. 메인 스레드에서 대기 시간을 덜어줍니다.

작동 방식을 단순화해 보겠습니다. 저수준 언어에서는 "벌써 시간이 됐나?"를 끊임없이 확인하여 타이머와 대기를 구현하는 경우가 많습니다. 경과 시간을 확인하고 적절한 시간이 되면 진행하는 while() 루프를 상상해 보세요. 최신 접근 방식에서는 CPU 인터럽트를 사용하여 CPU 스레드가 막히는 것을 방지할 수 있습니다.

그러나 JavaScript에서 setTimeout 또는 setInterval을 사용하면 대기 중에 언어가 완전히 유휴 상태가 됩니다. 이는 대기가 어떻게든 메인 스레드에서 처리된다는 의미입니다.

가져오기 및 기타 비동기 API

요즘에는 브라우저에서 점점 더 많은 비동기식 기능과 API를 사용하고 있습니다. 가져오기 API는 잘 알려진 예입니다. Clipboard API와 같은 최신 API도 비동기식입니다.

즉, 브라우저에 작업 수행을 요청하면 JavaScript의 메인 스레드가 해제되고(또는 다른 작업을 처리할 수 있도록 허용됩니다. 자세한 내용은 나중에 설명) 완료되면 (다음 코드를 처리하여) 알려줍니다.

비동기식 vs. 멀티스레드

비동기라고 해서 반드시 멀티스레드를 의미하는 것은 아닙니다. 항상 그런 것도 아니고 직접적으로 그런 것도 아닙니다. 단순히 함수 앞에 async라는 단어를 붙이는 것만으로는 아무 소용이 없습니다.

JavaScript가 비동기 동작을 처리하는 방법에는 두 가지 주요 구성 요소가 있습니다.

1. 콜백 큐와 이벤트 루프

콜백 대기열을 실행을 기다리는 함수 라인으로 생각하세요. 이러한 함수는 메인 스레드에서 하나씩 실행됩니다. 이벤트, 시간 초과, 가져오기 완료 등 비동기 작업이 완료되면 해당 콜백이 이 대기열에 배치됩니다.

이벤트 루프는 콜 스택이 비어 있을 때 콜백을 대기열에서 콜 스택으로 이동하는 역할을 담당합니다.

2. 브라우저에서 처리되는 기능

웹 브라우저는 특정 작업을 제어하고 해당 작업을 위해 새 스레드를 가동할 수 있습니다. 여기에는 fetch 또는 setTimeout과 같은 작업이 포함됩니다. JavaScript는 이러한 스레드를 관리할 필요가 없습니다. 비동기 작업이 완료되면 브라우저는 해당 콜백을 콜백 대기열에 배치하고 JavaScript는 거기에서 계속 실행됩니다.

다음 코드를 고려하세요.

console.log('Start');

setTimeout(() => {
  console.log('This is asynchronous');
});

console.log('End');

출력:

Start
End
This is asynchronous

상황은 다음과 같습니다.

• '시작'이 기록됩니다.
• setTimeout은 시간 초과 매개변수 없이 호출되므로 기본값은 0밀리초입니다. 콜백은 현재 콜 스택이 지워진 후 실행되도록 브라우저로 전송됩니다.
• '종료'가 기록됩니다.
• 이제 메인 스레드는 무료이며 이벤트 루프는 콜백 대기열을 확인합니다.
• setTimeout의 콜백 함수가 콜 스택으로 이동되었습니다.
• '비동기적입니다'라고 기록됩니다.

setTimeout에 시간 초과 매개변수가 누락되어 있습니다. 이는 우선순위가 낮은 코드 실행을 연기하는 일반적인 기술입니다. 먼저 다른 모든 작업을 처리한 후 "낮은 우선순위" 작업을 수행합니다.

이 기능은 setTimeout 내부의 함수를 즉시 콜백 대기열에 배치하고 메인 스레드가 유휴 상태일 때 첫 번째 기회에 실행되는 것입니다.

requestAnimationFrame의 특별한 경우

requestAnimationFrame은 뷰를 계산하고 업데이트하기 직전에 일부 코드를 실행하고 싶다고 브라우저에 알려주는 브라우저 API입니다(비디오 게임의 초당 프레임으로 생각하세요).

어떤 이유에서인지 웹 개발자들은 리페인팅과 FPS를 생각하지 않는데 그게 작동하는 방식입니다.

본질적으로 비동기식입니다(다중 스레드는 아니지만).

지정된 시간 없이 setTimeout을 사용하는 것은 requestAnimationFrame이 도입되기 전에도 유사한 목적으로 자주 사용되었지만 그다지 유용하지는 않았습니다(아무것도 없는 것보다는 낫습니다).

이 함수는 코드를 특수 스택에 대기열에 추가합니다. 새 프레임을 렌더링(다시 그리기)하기 직전에 브라우저는 대기 중인 이 코드를 실행합니다. DOM, HTML 또는 CSS를 변경하는 데 적합합니다(그러한 경우에만 계산을 금지합니다!).

진정한 멀티스레딩 옵션

이 기사에서는 이에 대한 내용은 아니지만 Web Workers 및 WebAssembly를 활용하여 진정한 멀티 스레드 작업을 달성할 수 있다는 점은 언급할 가치가 있습니다. 이를 통해 백그라운드 스레드에서 스크립트를 실행할 수 있습니다. DOM을 직접 조작할 수는 없지만 무거운 작업(행렬 계산 등)을 처리하는 데 매우 중요합니다. 이 접근 방식은 HTML5 기반 게임(tic-tac-toe뿐만 아니라 더 복잡한 게임)에서 자주 사용됩니다.

마지막 말

JavaScript는 격리되면 단일 스레드로 유지됩니다. 그러나 현실 세계에서는 웹 브라우저의 다중 스레드 환경에서 실행되는 해석된 언어입니다. 통역사가 도움의 손길을 내밀면 받아 사용하세요.

이 문서에서는 기본 지식, 낮은 수준의 설명 등 많은 내용을 다루고 있습니다. 그러나 개발은 종종 그런 식으로 이루어집니다. 모두가 서로 연결되어 있습니다. 이것이 바로 제가 더 넓은 그림을 보는 것을 좋아하는 이유입니다. 때로는 세부적인 초점이 문제의 해결책이 아닐 수도 있습니다.

---

비동기로 인해 디버깅 악몽이 발생한 적이 있습니까?
물론 그렇습니다. 몇 년 전에는 오류가 있는 스택을 얻는 것이 별 일이 아니었습니다.

위 내용은 Javascript에서 멀티 스레드 활용 - WebWorkers나 WebAssembly에 관한 것이 아닙니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!