js 에 대한 이벤트 순환 메커니즘 분석

머리말
자바 스 크 립 트 는 단일 스 레 드 라 는 핵심 으로 알려 져 있 지만 브 라 우 저 는 비동기 요청 을 잘 처리 할 수 있 습 니 다.그렇다면 왜 일 까요?그 중의 원 리 는 사건 순환 메커니즘 과 큰 관계 가 있다.
이벤트 순환 을 탐색 하기 전에 브 라 우 저 실행 스 레 드 를 알 아야 합 니 다~~
브 라 우 저의 렌 더 링 프로 세 스 는 다 중 스 레 드 입 니 다.브 라 우 저의 모든 tab 탭 은 하나의 독립 된 프로 세 스 를 대표 합 니 다.그 중에서 브 라 우 저 커 널 은 브 라 우 저 다 중 프로 세 스 의 하나 로 주로 페이지 렌 더 링,스 크 립 트 실행,이벤트 처리 등 을 책임 집 니 다.그 에 포 함 된 스 레 드 는 다음 과 같은 몇 가지 가 있다.
GUI 렌 더 링 스 레 드:렌 더 링 페이지 를 담당 하고 HTML 을 분석 하 며 CSS 는 DOM 트 리 를 구성 합 니 다.
JS 엔진 스 레 드:실행 코드,사용자 입력 과 네트워크 요청 을 설명 합 니 다.
이벤트 처리 라인:click,mouse 등 상호작용 이벤트 가 발생 한 후 이벤트 함 수 를 대기 열 에 넣 습 니 다.
타이머 트리거 스 레 드:시간 이 끝 난 후에 함 수 를 실행 하여 작업 대기 열 에 밀어 넣 습 니 다.
http 네트워크 요청 스 레 드:사용자 의 get,post 요청 을 처리 하고 결 과 를 작업 대기 열 에 되 돌려 줍 니 다.
브 라 우 저 렌 더 링 프로 세 스 를 알 고 JS 의 운영 체제 도 알 아야 합 니 다.JS 의 운영 체 제 는 이벤트 순환 입 니 다.
실행 창고
JS 가 운영 하 는 환경 을 숙주 환경 이 라 고 합 니 다.
실행 스 택:call stack,하나의 데이터 구조 로 각종 함수 의 실행 환경 을 저장 하 는 데 사 용 됩 니 다.모든 함수 가 실행 되 기 전에 관련 정 보 는 실행 스 택 에 추 가 됩 니 다.함수 호출 전에 실행 환경 을 만 들 고 실행 스 택 에 가입 합 니 다.함수 호출 후 실행 환경 을 소각 합 니 다.

이벤트 순환
js 의 모든 작업 은 동기 화 작업 과 비동기 작업 으로 나 눌 수 있 습 니 다.동기 화 작업 은 즉시 수행 하 는 작업 입 니 다.동기 화 작업 은 보통 메 인 스 레 드 에 직접 들 어가 서 실 행 됩 니 다.비동기 임 무 는 비동기 적 으로 수행 하 는 임무 입 니 다.예 를 들 어 ajax 네트워크 요청,setTimeout 정시 함수 등 은 모두 비동기 임무 에 속 합 니 다.비동기 임 무 는 작업 대기 열(선진 선 출)의 체 제 를 통 해 조 화 를 이 룰 것 입 니 다.동기 화 와 비동기 작업 은 각각 다른 실행 환경 에 들 어가 고 주 스 레 드,즉 주 실행 스 택,비동기 적 으로 작업 대기 열 에 들 어 갑 니 다.메 인 라인 의 작업 이 비어 있 으 면 작업 대기 열 에 가서 해당 하 는 작업 을 읽 고 메 인 라인 으로 밀어 넣 습 니 다.이런 반복 은 바로 우리 가 말 하 는 Event Loop(이벤트 순환)이다.구체 적 인 절 차 는 아래 그림 과 같다.

이벤트 순환 에서 매번 순환 작업 을 진행 할 때마다 tick 이 라 고 합 니 다.매번 tick 의 작업 키 의 절 차 는 다음 과 같 습 니 다.1.매크로 작업 을 수행 합 니 다(스 택 에 없 으 면 이벤트 대기 열 에서 가 져 옵 니 다).2.실행 과정 에서 마이크로 작업 이 발생 하면 마이크로 작업 의 작업 대기 열 에 추가 합 니 다.3.매크로 작업 을 수행 한 후 현재 마이크로 작업 대기 열 에 있 는 모든 마이크로 작업 을 즉시 수행 합 니 다(순서대로 실행).4.현재 매크로 작업 이 완료 되 었 습 니 다.렌 더 링 을 검사 한 다음 GUI 스 레 드 연결 렌 더 링 을 시작 합 니 다.5.렌 더 링 이 끝 난 후 JS 스 레 드 를 계속 연결 하고 다음 매크로 작업 을 시작 합 니 다(이벤트 대기 열 에서 가 져 오기)

매크로 작업 은 주로 script(전체 코드),setTimeout,setInterval,I/O,UI 인 터 랙 션 이벤트,setImmediate(Node.js 환경)를 포함한다.
마이크로 작업 은 주로 Promise,MutaionObserver,process.nextTick(Node.js 환경)을 포함한다.
이벤트 순환 예

console.log('script start');
//   script              ，   console.log，   script start
setTimeout(function() {
  console.log('setTimeout');
}, 0);
//   setTimeout，             Event Queue  
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});
//   Promise，  then          Event Queue  ,   then1，       then   ，        Event Queue  ，   then2
console.log('script end');
//   console.log，   script end

이렇게 이벤트 Queue(이벤트 대기 열)에 세 가지 작업 이 존재 합 니 다:매크로 작업:setTimeout 마이크로 작업:then 1,then 2.마이크로 작업 을 수행 하려 면 먼저 then 1,출력 promise 1,그리고 then 2,출력 promise 2 를 실행 하면 모든 마이크로 작업 을 비 웁 니 다.
setTimeout 작업 을 수행 하고 setTimeout 을 출력 합 니 다.출력 순 서 는 script start,script end,promise 1,promise 2,setTimeout 입 니 다.
요약:
JavaScript 는 단일 스 레 드 언어 입 니 다.비동기 작업 은 모두 이벤트 순환 대기 열 에 넣 고 주 실행 스 택 에서 실 행 될 때 까지 기다 리 며 전문 적 인 비동기 실행 스 레 드 가 없습니다.
js 의 이벤트 순환 체제 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 js 이벤트 순환 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!