자바스크립트의 무릎 깊이: 자바스크립트가 실행될 때

Javascript는 이상한 오래된 물건이다.그것은 다른 언어와 다르지만 인터넷의 한 구성 부분이기 때문에 우리 생활의 일부이기도 하다.처음에 나는 그것을 싫어했고, 가능한 한 오랫동안 공부를 미루었는데, 지금은 그것을 지나치게 사랑하는 팬이다.그것의 흉터와 주름은 이미 강력한 아름다움으로 변했다.
본고는 고차원 분야에 착안하고자 한다.

자바스크립트로 코드를 실행할 때 도대체 무슨 일이 일어났습니까?

코드부터 시작합니다.

function logger(message) {
    console.log(message)
}

logger("Hello")

우리는 모두 이것이 컨트롤러에'안녕하세요'를 인쇄할 것이라는 것을 알고 있지만, 배후에서 무슨 일이 일어날까요?이를 위해서는 Javascript가 실행될 때 알아야 합니다.

실행 상하문부터 시작합시다.전역 실행 상하문은javascript 해석, 저장 및 실행 코드의 환경 이름입니다.여기에는

실행 루틴 - 자바스크립트가 순서대로 코드를 해석하는 곳입니다.

전역 변수 환경 (또는 전역 메모리) - 자바스크립트가 만나는 모든 변수와 함수를 저장하는 곳

Javascripts 실행 루틴이 우리 코드를 통해 해석될 때 다음 두 가지 중 하나를 수행합니다.

코드를 메모리에 저장 - 태그와 저장된 코드 세그먼트를 생성합니다 (참고: 코드를 저장할 때 Javascript는 그것을 읽는 데 신경을 쓰지 않습니다. 나중에 접근할 수 있도록 메모리에 넣을 뿐입니다)

실행 코드 - 자바스크립트가 실행하는 곳입니다. 예를 들어 호출 함수입니다.이를 위해 호출 창고에 새로운 로컬 실행 상하문을 추가했습니다. 실행 루틴은 로컬 상하문에 들어갑니다

이것은 자바스크립트에 대한 두 가지 관심을 불러일으켰다.

Javascript is single threaded and synchronous

단일 스레드: Javascript는 코드에서 여러 개의 다른 경로를 동시에 사용하지 않고 하나의 경로를 따릅니다.
동기화: Javascript는 코드의 표시 순서에 따라 코드를 처리합니다.그것이 현재 코드 줄을 처리할 때, 모든 다른 코드는 반드시 그것이 완성될 때까지 기다려야 한다
코드 세션의 컨텍스트를 살펴보겠습니다.

실행 루틴은 한 줄씩 우리의 코드를 통과할 것이다.그것이 본 첫 줄은logger의 함수 정의입니다.내부 내용을 읽지 않으면 자바스크립트는 이 정의를 변수 이름 logger 의 메모리에 추가합니다.그리고 실행 루틴은 다음 줄 코드, 즉 다섯 번째 줄로 이동합니다.여기서 자바스크립트는 변수 이름logger을 보고 전역 메모리를 검사하여 같은 이름으로 저장된 변수가 있는지 확인합니다.있습니다. 따라서 Javascript는 이 코드를 실행하고 매개 변수를 전달합니다"Hello".
루틴 호출 함수를 실행할 때, Javascript는 이른바 로컬 실행 상하문을 만듭니다.로컬 실행 상하문 또는 함수 수준 실행 상하문은 소형 전역 실행 상하문과 유사하다.실행 루틴은 이 국부 상하문을 통해 데이터를 국부 메모리 (국부 변수 환경) 에 저장할 수 있습니다.참고 로컬 컨텍스트는 글로벌 메모리에 액세스할 수 있지만 글로벌 메모리는 로컬 메모리에 액세스할 수 없습니다.이것이 바로 이른바 범위다.프로그램이 갈수록 복잡해지면서 많은 실행 상하문이 한데 묶일 수 있다.중요한 것은 모든 실행 상하문이 자신의 메모리와 조상의 메모리에 접근할 수 있다는 것을 기억하는 것이다.변수를 찾을 때, 자신의 실행 상하문에서 그것을 찾지 못하면, 자바스크립트는 다음 실행 상하문을 검색합니다. 변수를 찾거나 오류를 던질 때까지.
실행 루틴이 있는 상하문을 추적하기 위해 창고를 호출합니다.새 로컬 실행 상하문 (호출 또는 프레임) 은 스택으로 전송되며, 완료되면 스택에서 팝업되며, 실행 루틴은 전역 상하문으로 되돌아옵니다.호출 창고는 후진 선출이다. 접시 한 무더기처럼 마지막에 열리는 것은 항상 첫 번째로 열리는 것이다.
Javascript는 동기화되기 때문에 여러 개의 코드 블록을 동시에 실행할 수 없습니다.이를 관리하기 위해 Javascript는 두 개의 대기열을 가지고 있으며, 실행 라인이 준비될 때까지 비동기적으로 대기합니다.

리셋 대기열(또는 작업 대기열)

마이크로퀘스트 대기열

리셋 대기열과 마이크로퀘스트 대기열은 모두 FIFO: 먼저 나가세요.마이크로퀘스트 대기열의 우선순위가 리셋 대기열보다 높기 때문에 리셋이 먼저 실행됩니다.마이크로퀘스트 대기열이 비어 있을 때만 리셋 대기열의 리셋이 창고로 전송됩니다. 이것은 마이크로퀘스트 대기열의 리셋이 너무 많으면 리셋 대기열이 기아 상태에 빠지고 작업이 리셋 창고에 들어가는 것을 막는다는 것을 의미합니다.
이벤트 순환은 어떤 리셋이 창고로 옮겨질지 결정하는 것을 책임진다.두 가지 기준을 사용합니다.

글로벌 컨텍스트의 모든 코드가 실행됩니까?

호출 스택이 비어 있습니까?

이러한 조건이 충족되면 스택으로 리셋됩니다.
그러면 어떤 임무가 어느 대열에 들어갑니까?모든 Javascript가 실행될 때 미세한 차이가 있기 때문에 우리가 브라우저에 있다고 가정해 봅시다.
리셋 대기열에 추가하는 주요 방법은 다음과 같습니다.

HTML에서 스크립트 로드

이벤트 트리거

사용setTimout() 또는 setInterval()

마이크로 작업 대기열의 경우 다음 두 가지 옵션이 있습니다.

약속 결정 또는 거부

사용window.queueMicrotask() (일반적으로 라이브러리/프레임워크를 만들지 않으면 사용하지 않음)

이것은 자바스크립트가 실행될 때의 회오리 여행이다.이 기초 심지 모델이 있으면 우리는 계속 향상과 비동기적인 자바스크립트를 배울 수 있다.다음은 2부.