js의 이벤트 루프에 대한 자세한 소개(그림 및 텍스트)

이 기사는 js의 이벤트 루프에 대한 자세한 소개(그림 및 텍스트)를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

브라우저 렌더링

시간이 많이 소요되는 관점에서 볼 때 브라우저는 페이지를 요청하고 로드하고 렌더링하며 시간은 다음 다섯 가지에 소요됩니다.
1. DNS 쿼리
2.TCP 연결
3.HTTP 요청 및 응답
4.서버 응답
5.클라이언트 렌더링

여기서 중점적으로 살펴보겠습니다. 다섯 번째 이 부분은 브라우저에 의한 콘텐츠 렌더링입니다. 이 부분(렌더링 트리 구성, 레이아웃 및 그리기)은 다음과 같은 다섯 부분으로 나눌 수 있습니다.

1. HTML 마크업을 처리하고 DOM 트리를 구축합니다.
2. CSS 마크업을 처리하고 CSSOM 트리를 구축합니다.
3. DOM과 CSSOM을 렌더링 트리에 병합합니다.
4. 렌더링 트리에 따라 레이아웃하여 각 노드의 기하학적 정보를 계산합니다.
5. 각 노드를 화면에 그립니다.

이 글의 본문은 아니고, 위의 과정을 마친 후 전체 페이지가 나왔다고 합니다. 현재 브라우저가 이미 유휴 상태인지(애니메이션은 고려하지 않음) , 상호 작용 등) ? 다음은 이 글의 핵심이다.

힙, 스택, 큐

핵심 사항을 이해하기 전에 먼저 간단한 기본 지식인 힙, 스택, 큐를 이해해 보겠습니다.

Stack; #🎜 🎜#

객체는 대부분 구조화되지 않은 메모리 영역을 나타내는 데 사용되는 힙에 할당됩니다.

프로그램 실행 시 새로운 연산으로 생성된 객체에 할당해야 하는 저장 공간으로, 특별한 제한이 없습니다.

Stack

함수 호출은 스택 프레임을 형성합니다.

스택의 특성: 선입, 후출(선입, 후출) 기능 실행 스택 프로세스 ; 첫 번째 함수가 실행될 때마다 해당 함수를 스택에 푸시하는 것으로 볼 수 있습니다. 이때 해당 함수에서 실행 중인 다른 함수(두 번째 함수)는 두 번째 함수 이후에 다시 스택에 푸시되어야 합니다. 실행되면 두 번째 함수가 스택에서 팝되고 첫 번째 실행이 완료되면 먼저 스택에서 팝됩니다. 🎜#Queue는 파이프와 유사하게 스택과 다릅니다. 먼저 들어가는 것이 나타나며 스택과 반대입니다.

event-loop

javascript는 탄생 이후 단일 스레드, 비차단 스크립트 언어였습니다. 이는 원래 목적인 브라우저와의 상호 작용에 따라 결정됩니다. 단일 스레드는 JavaScript 코드가 실행될 때 언제든지 모든 작업을 처리하는 기본 스레드가 단 하나라는 것을 의미합니다. 코드가 비동기 작업(I/O 이벤트와 같이 결과를 즉시 반환할 수 없고 반환하는 데 일정 시간이 걸리는 작업)을 수행해야 하는 경우 차단하는 대신 메인 스레드가 일시 중지됩니다( 보류 중) 이 작업을 수행한 다음 비동기 작업이 결과를 반환할 때 특정 규칙에 따라 해당 콜백을 실행합니다.

단일 스레딩이 필요하고 JavaScript 언어의 초석이 되는 이유 중 하나는 초기이자 가장 중요한 실행 환경인 브라우저에서 다양한 DOM 작업을 수행해야 하기 때문입니다. JavaScript가 다중 스레드인 경우 두 스레드가 동시에 dom에서 작업을 수행하는 경우(예: 하나는 이벤트를 추가하고 다른 하나는 dom을 삭제하는 경우) 이를 어떻게 처리해야 할까요? 따라서 이 예제와 유사한 상황이 발생하지 않도록 JavaScript는 하나의 메인 스레드만 사용하여 코드를 실행하도록 선택하여 프로그램 실행의 일관성을 보장합니다.

물론 요즘 사람들도 단일 스레드가 실행 순서를 보장하지만 자바스크립트의 효율성을 제한한다는 사실을 깨닫고 웹 워커 기술이 개발되었습니다. 이 기술은 JavaScript를 다중 스레드 언어로 만든다고 주장합니다.

그러나 웹 작업자 기술을 사용하는 멀티스레딩에는 많은 제한 사항이 있습니다. 예를 들어 모든 새로운 스레드는 기본 스레드에 의해 완전히 제어되며 독립적으로 실행될 수 없습니다. 이는 이러한 "스레드"가 실제로 메인 스레드의 하위 스레드여야 함을 의미합니다. 또한 이러한 하위 스레드에는 I/O 작업을 수행할 권한이 없으며 계산 등 일부 작업만 메인 스레드와 공유할 수 있습니다. 따라서 엄밀히 말하면 이러한 스레드에는 완전한 기능이 없으므로 이 기술은 JavaScript 언어의 단일 스레드 특성을 변경하지 않습니다.

JavaScript는 앞으로도 항상 단일 스레드 언어가 될 것으로 예상됩니다.

스크립트의 효율성을 높이기 위해 디자인할 때 매우 흥미로운 기능은 다른 많은 언어와 달리 이벤트 루프 모델이 절대 차단되지 않는다는 것입니다. I/O 처리는 일반적으로 이벤트와 콜백을 통해 수행되므로 애플리케이션이 IndexedDB 쿼리가 반환되거나 XHR 요청이 반환되기를 기다리는 동안 사용자 입력과 같은 다른 작업을 계속 처리할 수 있습니다.

매크로 태스크 및 마이크로 태스크



먼저 글로벌 태스크라고 불리며 매크로 태스크에 속하는 스크립트를 실행합니다.
#🎜 🎜#

매크로태스크가 다음 실행을 마치면 모든 마이크로태스크를 실행합니다. 매크로 태스크가 실행됩니다.

매크로 작업에는 script, setTimeout, setInterval, setImmediate, I/O, UI 렌더링, requestAnimationFrame이 포함됩니다.
Micro 작업에는 process.nextTick(노드 API), 기본 Promise(일부 구현된 Promise는 then 메서드를 매크로에 넣습니다) jobs(medium), Object.observe(observe), MutationObserver

Execution order

모든 매크로 작업은 매크로 작업 대기열(예: 작업 대기열)에 배치됩니다. 매크로 작업을 처리한 후(스크립트에서 시작) 마이크로 작업을 넣습니다. queue((당시의 모든 마이크로태스크 포함)는 작업 큐(매크로 태스크 큐)에 푸시되어 실행되고, 다음 작업 큐(매크로 태스크)의 매크로 태스크는 제거됩니다.

관련 추천:

자바스크립트에서 테이블의 체크된 행을 삭제하는 방법(코드)

자바스크립트에서 td 태그와 tr 태그를 동적으로 추가하는 방법(코드)

위 내용은 js의 이벤트 루프에 대한 자세한 소개(그림 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!