JS 이벤트 순환 메커니즘 이벤트 loop 매크로 작업 마이크로 작업 원리 분석

일단 코드를 볼게요.

async function (){
		await f2()
		console.log('f1')
	}

	async function f2(){
		console.log('f2')
	}
	
	console.log(' 1')
	f1()
	setTimeout(()=>{
		console.log(' ')
	})
	console.log(' 2')

정확한 인쇄 순서는: 정상 1, f2, 정상 2, f1, 타이머
왜 이렇게 인쇄 순서가 나올까요?
우선javascript는 단일 스레드 언어로 최신 HTML5에서 Web-Worker를 제기했지만 javascript는 단일 스레드라는 핵심은 아직 바뀌지 않았다.기왕 js가 단일 노선이라면 창구가 하나밖에 없는 은행과 같다. 고객은 줄을 서서 하나하나 업무를 처리해야 하고 js 임무도 하나하나 순서대로 수행해야 한다.만약 한 임무가 너무 오래 소모된다면, 다음 임무도 반드시 기다려야 한다.그래서 동기화 작업과 비동기화 작업이 생겼다.
개념
광범위한 동기화 작업과 비동기화 작업을 제외하고는 임무를 더욱 세밀하게 구분할 수 있다

macro-task(매크로 작업): 전체 코드 script, setTimeout, setInterval 포함

micro-task(미세한 작업): Promise, process.nextTick

매크로 작업: 브라우저는 JS 내부 task와 DOM 작업이 질서정연하게 실행될 수 있도록 하나의 task 실행이 끝난 후 다음 task 실행이 시작되기 전에 페이지를 다시 렌더링합니다 (task-> 렌더링-> task->...)
마우스 클릭으로 이벤트 콜백이 발생합니다. 매크로 작업을 수행하고 HTMl을 해석해야 합니다.
마이크로퀘스트: 마이크로퀘스트는 일반적으로 현재 동기화 퀘스트가 끝난 후에 즉시 실행해야 하는 퀘스트이다. 예를 들어 일련의 동작에 대해 피드백을 하거나 비동기적인 퀘스트가 필요하고 새로운 퀘스트를 분배할 필요가 없다. 그러면 성능의 비용을 줄일 수 있다.
기왕 우리가 개념을 잘 알았으니, 우리는 코드를 다시 한 번 보자

async function (){
		await f2()
		console.log('f1')
	}

	async function f2(){
		console.log('f2')
	}
	
	console.log(' 1')
	f1()
	setTimeout(()=>{
		console.log(' ')
	})
	console.log(' 2')

실행 순서
우선 우리는 정상적인 동기화 프로세스를 진행하여'정상 1'을 출력하고 f1() 함수를 실행합니다. await 뒤에 있는 함수 f2()가 바로 실행되기 때문에'f2'를 출력하고 동기화 코드를 계속 출력합니다.'정상 2'를 출력합니다. 이 동기화 작업이 모두 끝나면 비동기화 작업 마이크로 작업을 시작합니다. await f2() 방법이 실행된 후에 f1을 출력하고 마지막으로 매크로 작업 setTimeout을 출력합니다.
이것이 바로'정상1', 정상2'가'f1'에 인쇄되는 이유입니다. 모든 마이크로 작업이 실행될 때 현재 실행 창고의 코드가 실행되어야 하기 때문입니다. 'f2','f1'이'타이머'에 인쇄되기 전에 모든 마이크로 작업이 다음 매크로 작업 전에 모두 실행되기 때문
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.