자바스크립트의 런타임 이해!

자바스크립트의 런타임 이해!

반응형

V8이란 무엇이며 비동기식 계산은 어떻게 작동합니까?

C++ 프로젝트를 진행하다가 비동기식 네트워크 호출을 구현해야 했습니다. 자바스크립트에 사용된 단순하고 간단한 구문과는 비교가 되지 않습니다. (일부만 PTSD를 제공하고 싶지는 않습니다.)

저는 궁금해지고 자바스크립트에서 비동기식 작업이 어떻게 작동하는지 더 깊이 연구했습니다. 엄청난 양의 연구 끝에, 저는 제가 배운 모든 것을 간단하고 이해하기 쉬운 기사로 정리하고 싶었습니다.

V8 엔진

Javascript는 코드를 토큰으로 구문 분석하고 시스템 실행 가능한 명령으로 변환하는 V8이라는 오픈 소스 엔진에서 실행됩니다. 런타임에는 호출 스택과 힙이 있습니다. 힙은 동적 메모리가 할당되는 곳으로, 현재 주제와 관련이 없기 때문에 나중에 해당 항목이 될 수 있습니다. 코드 일부를 예로 들어 통화 스택에 대해 자세히 알아보겠습니다.

function foo1() { console.log('Hi') } function foo() { foo1() } foo()

javascript 파일은 "main()"이라는 익명 함수로 포장되어 호출 스택에 먼저 마운트됩니다.

주 함수는 "foo()" 함수를 호출하고 스택에 마운트됩니다.

이 함수는 "foo1()" 함수를 "console.log("Hi")"를 호출 스택에 푸시하는 스택에 마운트합니다. "console.log()" 함수는 "Hi" 문자열을 콘솔에 기록하고 팝업됩니다.

함수 "foo1()"은 안에 있는 모든 명령을 완료하고 스택에서 튀어나옵니다. 마찬가지로 나머지 두 가지 기능도 팝업됩니다. 이것은 스택을 비우고 프로그램은 완성됩니다.

크롬 런타임 및 setTimeout

그러나 V8은 단일 스레드 애플리케이션이며 setTimeout, setInterval 또는 XMLHtpRequest와 같은 일반적인 비동기 기능이나 비동기 기능을 구현하지 않습니다. 이러한 기능은 웹 API로 구현되며 브라우저 또는 노드와 같은 로컬 런타임 제공자에 의해 처리됩니다.현재 Google Chrome의 Javascript Runtime Environment에서 위의 코드 조각이 어떻게 표시되는지 살펴봅시다(거의 모든 브라우저가 이와 유사하게 처리함).

크롬은 V8 엔진을 감싸고 다른 스레드에서 실행되는 이벤트 루프, 작업 대기열 및 일부 웹 API를 구현합니다. 웹 API에는 문서 오브젝트(DOM), ajax 요청 및 setTimeout 및 setInterval과 같은 기능이 포함됩니다. 이러한 작동 방식을 이해하기 위해 setTimeout과 같은 비동기 함수가 있는 코드를 예로 들어 보겠습니다.

console.log("Hi") setTimeout(function callback() { console.log("timeout") },5000) console.log("completed")

먼저, "main()" 함수가 V8 콜 스택에 마운트되고 "console.log("Hi")," 뒤에 "Hi" 함수가 온다.

이제 setTimeout이 콜 스택에 마운트됩니다. 타이머가 완료될 때까지 5초 동안 기다리는 대신, 콜백 함수 "콜백()"을 타이머를 처리하는 웹 API 스레드에 푸시합니다.

응답을 기다리지 않고 스택에서 팝업되고 다음 "console.log("completed")"가 스택에 푸시됩니다.

console.log()가 콘솔에 "완료" 문자열을 기록하면 스택을 비우는 "main()" 함수와 함께 해당 문자열이 팝업됩니다.

일단 웹 API 스레드의 타이머가 완성되면, 현재 실행 중인 명령을 방해할 수 있는 함수를 호출 스택에 직접 밀어넣는 대신, 그것은 작업 대기열에 밀어넣어진다.

작업 대기열은 모든 콜백을 보관하고 콜 스택이 해제될 때까지 기다립니다. 호출 스택이 비어 있으면 이벤트 루프가 가장 위에 있는 콜백을 선택하여 호출 스택에 밀어 넣습니다.

우리의 경우, "callback" 함수를 푸시하여 "console.log("timeout")" 및 "timeout"이 콘솔에 기록됩니다.

나머지 두 항목은 마침내 호출 스택을 비우고 프로그램을 종료합니다.

자, 이제 자바스크립트 런타임이 어떻게 작동하는지, 비동기식 계산을 어떻게 처리하는지 알게 되었습니다. 몇 가지 실수가 있을 수 있으니, 혹시 찾으시면 언제든지 댓글로 보내 주세요.

저는 제가 주로 작업하는 일에 깊이 빠져드는 것을 좋아하고 다음 기사에 대한 반응 고리를 완화시킬 계획입니다.

from http://it-ground.tistory.com/312 by ccl(A) rewrite - 2021-10-15 19:26:45