JavaScript 실행 메커니즘 자세히 보기

1. 자바스크립트
javascript는 단일 스레드 언어로 최신 HTML5에서 웹 Worker를 제기했지만 javascript는 단일 스레드라는 핵심은 아직 바뀌지 않았다.
왜 js는 단일 라인의 언어입니까?최초의 js는 브라우저 검증 폼에서 DOM 요소를 조작하는 데 사용되었기 때문이다.만약 js가 다중 루트라면 두 개의 루트가 동시에 하나의 DOM에 대해 서로 충돌하는 조작을 한다면 브라우저의 해석은 실행할 수 없습니다.
Web Worker의 역할은 JavaScript를 위한 다중 스레드 환경을 만들고 주 스레드가 Worker 스레드를 만들 수 있도록 하며 일부 작업을 후자에게 분배하여 실행하는 것이다.주 스레드가 실행되는 동안 Worker 스레드는 백그라운드에서 실행되며 서로 간섭하지 않습니다.Worker 스레드가 계산 작업을 완료한 후에 결과를 주 스레드로 되돌려줍니다.
2. 자바스크립트 이벤트 순환
우리가 방법을 호출할 때 js는 이 방법에 대응하는 실행 환경 (context) 을 생성하고 실행 상하문이라고도 부른다.이 실행 환경에는 이 방법의 개인 작용역, 상부 작용역의 지향, 방법의 매개 변수, 이 작용역에 정의된 변수와 이 작용역의this 대상이 존재한다.일련의 방법이 순서대로 호출될 때 js는 단일 노선이기 때문에 같은 시간에 하나의 방법만 실행할 수 있기 때문에 이런 방법은 하나의 단독 장소에 줄을 서 있다.이곳은 집행창고라고 불린다.
js 엔진이 비동기 이벤트를 만났을 때 결과가 돌아오기를 기다리지 않고 이 이벤트를 끊고 창고의 다른 작업을 계속 수행합니다.
비동기 이벤트가 결과를 되돌려주면 js는 이 이벤트를 현재 실행 창고와 다른 다른 대기열에 추가합니다. 우리는 이벤트 대기열이라고 합니다.이벤트 대기열에 넣으면 즉시 리셋을 실행하지 않고 현재 실행 창고의 모든 작업이 완료되기를 기다립니다. 메인 라인이 유휴 상태일 때, 메인 라인은 이벤트 대기열에 작업이 있는지 찾습니다.만약 있다면, 메인 라인은 그 중에서 첫 번째 이벤트를 추출하고, 이 이벤트에 대응하는 리셋을 실행 창고에 넣고, 그 중의 동기화 코드를 실행합니다.이렇게 반복하면 무한한 순환이 이루어진다.
셋, setTimeout
set Timeout 이 함수는 지정된 시간을 거친 후 실행할 작업을 Event Queue에 추가하는 것입니다. 또한 단일 스레드 작업이기 때문에 하나씩 실행해야 합니다. 만약에 앞의 작업이 너무 오래 걸리면 기다릴 수밖에 없습니다.

setTimeout(() => {
 task()
},3000)

sleep(10000000)

상기 코드가 task () 를 실행하는 데 걸리는 시간은 3초를 훨씬 넘습니다. 실행 과정은 다음과 같습니다.

task()가 Event Table에 들어가서 등록하고 시간 계산을 시작합니다.

sleep 함수를 실행하는데 느리고 느리며 시간 계산이 계속되고 있습니다.

3초가 되었습니다. 이벤트 타임아웃이 완료되고task () 는 이벤트 Queue에 들어갔지만 sleep가 아직 실행되지 않아 기다릴 수밖에 없습니다.

sleep가 드디어 실행되었고,task()는 마침내 EventQueue에서 메인 라인으로 실행되었습니다.

　setTimeout(fn,0)의 의미는 어떤 임무가 메인 라인에서 가장 먼저 얻을 수 있는 여가 시간에 실행되도록 지정하는 것이다. 즉, 몇 초만 더 기다리지 않고 메인 라인에서 실행 창고 안의 동기화 임무를 모두 수행하면 창고가 비어 있으면 바로 실행한다는 것이다.
넷째, setInterval
실행 순서에 대해 setInterval은 지정한 시간마다 등록된 함수를 EventQueue에 설정합니다. 앞의 작업이 너무 오래 걸리면 기다려야 합니다.
유일하게 주의해야 할 점은 setInterval(fn, ms)에 대해 말하자면, 우리는 ms초마다 fn을 실행하는 것이 아니라, ms초마다 fn이 이벤트Queue에 들어간다는 것을 이미 알고 있다.
5. Promise와 process.nextTick(callback)
Promise는 비동기 프로그래밍의 해결 방안으로 전통적인 해결 방안인 리셋 함수와 사건보다 더욱 합리적이고 강력하다.
이른바 Promise란 간단하게 말하면 하나의 용기로 미래에 끝날 사건(일반적으로 비동기적인 조작)의 결과를 저장하고 있다.문법적으로 프로미스는 비동기적인 조작에 대한 정보를 얻을 수 있는 대상이다.Promise는 다양한 비동기식 작업을 동일한 방법으로 처리할 수 있는 통일된 API를 제공합니다.
　　process.nextTick(callback)은 node와 유사합니다.js 버전의 "setTimeout"은 이벤트 순환의 다음 순환에서 콜백 리셋 함수를 호출합니다.
6. 매크로 작업 및 마이크로 작업

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

포함

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

서로 다른 유형의 작업은 대응하는 이벤트Queue에 들어갑니다. 예를 들어 setTimeout과 setInterval은 같은 이벤트Queue에 들어갑니다.
이벤트 순환의 순서, js 코드의 실행 순서를 결정합니다.
전체 코드 (매크로 작업) 에 들어간 후 첫 번째 순환을 시작합니다.이어서 모든 미세한 임무를 집행하다.그리고 다시 매크로 작업에서 시작하여 작업 대기열 중 하나가 실행된 것을 찾고 모든 마이크로 작업을 수행합니다.

setTimeout(function() {
 console.log('setTimeout');
})

new Promise(function(resolve) {
 console.log('promise');
}).then(function() {
 console.log('then');
})

console.log('console');

이 코드는 매크로 작업으로 주 라인에 들어갑니다.

setTimeout을 만나면 리셋 함수를 등록한 후 매크로 작업 Event Queue에 나누어 줍니다.

다음에 Promise를 만났습니다. new Promise가 바로 실행되었습니다. 왜냐하면 new Promise 리셋 함수의 코드는 동기화 작업이고 then 함수는 마이크로 작업 Event Queue에 분배되기 때문입니다.

console를 만나다.log (), 지금 실행합니다.

자, 전체 코드 script가 첫 번째 매크로 작업으로 끝났습니다. 어떤 마이크로 작업이 있는지 보십시오.우리는 then이 마이크로퀘스트 이벤트 Queue에서 실행되는 것을 발견했다.

1차 이벤트 순환이 끝났습니다. 2차 순환을 시작합니다. 매크로 퀘스트 이벤트 Queue부터 시작해야 합니다.매크로 작업 Event Queue에서 setTimeout에 대응하는 콜백 함수를 발견했습니다. 바로 실행하십시오.

끝.

7. async await
1.async는 어떤 일을 합니까?
async 키워드를 가진 함수입니다. 함수의 반환값은 반드시promise 대상입니다.
즉, async 키워드 함수가promise가 아니라면 자동으로 Promise를 사용합니다.resolve () 포장.만약 async 키워드 함수가promise를 현저하게 되돌려준다면, 당신이 되돌려준promise를 기준으로 합니다.
2. await는 무엇을 기다리고 있습니까?
await 등은 오른쪽 표현식의 결과입니다.즉, 오른쪽이 함수라면 함수의return값은'표현식의 결과'입니다.오른쪽이'hello'또는 어떤 값이라면 표현식의 결과는'hello'입니다.
3.await 기다린 후에 무슨 일을 했습니까?
await 오른쪽 표현식의 결과는 await가 기다려야 할 것이다.그 후에 await에 대해 두 가지 상황으로 나눈다.

promise 대상이 아니다

promise 대상입니다.

만약promise가 아니라면await는 뒤의 코드를 막는다. 먼저 async 바깥의 동기화 코드를 실행하고 동기화 코드를 실행하고 다시 async 내부로 돌아가서 이 비promise 물건을 await 표현식의 결과로 삼는다.
만약에promise 대상을 기다린다면await도async 뒤에 있는 코드를 멈추고 async 밖에 있는 동기화 코드를 실행하고 Promise 대상fulfilled를 기다린 다음에resolve의 매개 변수를await 표현식의 연산 결과로 삼을 것입니다.
4. 예

async function async1() {
 console.log('async1 start');
 await async2();
 console.log('async1 end');
}

async function async2() {
 console.log('async2');
}

console.log('script start');
setTimeout(function () {
 console.log('setTimeout');
}, 0);
async1();
new Promise(function (resolve) {
 console.log('promise1');
 resolve();
}).then(function () {
 console.log('promise2');
});
console.log('script end');

이 코드는 매크로 작업으로 주 라인에 들어갑니다.

스크립트 start를 출력합니다.이어서 함수 async1을 실행합니다.

async1start를 출력하고await에 실행하며 함수async2를 출력하고async2를 출력합니다.

이때await는async1 뒤의 코드를 막고 async1 바깥의 동기화 코드를 먼저 실행합니다.

setTimeout을 이벤트 순환의 매크로 작업에 넣습니다.이어서 Promise로 실행하여 promise 1, promise를 출력합니다.이벤트가 순환하는 미세 작업을 넣습니다.이어서 스크립트 end를 인쇄합니다.

현재 async1 바깥쪽의 동기화 코드가 실행되었습니다. async1 내부로 돌아가서 async1 end를 출력합니다.

전체 코드 실행 완료, 마이크로 퀘스트 프로미스.then,promise2를 출력합니다.

마지막으로 매크로 작업 setTimeout을 실행하고 setTimeout을 인쇄합니다.

그래서 이 코드의 실행 순서는:scriptstart->async1start->async2->promise1->scriptend->async1end->promise2->setTimeout
이상은 자바스크립트의 실행 메커니즘에 대한 상세한 내용입니다. 자바스크립트의 실행 메커니즘에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!