JavaScript 실행 메커니즘에 대한 심층적인 이해

본 글은 자바스크립트 실행 메커니즘에 대한 심층적인 이해에 관한 내용으로, 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우선, 우리 모두는 JavaScript가 단일 스레드 언어라는 것을 알고 있으므로 다음과 같이 결론을 내릴 수 있습니다.

JavaScript는 명령문 순서로 실행됩니다.

첫 번째 보기:

let a = '1'
console.log(a)

let b = '2'
console.log(b)

분명히 모두가 결과를 알고 있으며, 순서대로 1을 출력합니다. , 2

그러나 다른 방법으로는

setTimeout(function() {
    console.log(1)
})

new Promise(function(resolve) {
    console.log(2)
    for(var i = 0;i< 10;i++){
        i === 10 && resolve()
    }
}).then(function() {
    console.log(3)
})
console.log(4)

이때 코드의 순차적 실행을 보면 1, 2, 3, 4가 출력됩니다. 좋아, 브라우저에 넣고 실행해봐, 뭐? 출력은 실제로 2, 4, 3, 1입니다. 약속한 대로 순서대로 실행하면 어떨까요? 다음으로 JavaScript의 실행 메커니즘을 이해해야 합니다.

Single-threaded

먼저 JavaScript는 Single-threaded 언어이고 Web-worker는 최신 HTML5에서 출시되었지만 Single-threaded 언어라는 JavaScript의 핵심은 변하지 않았습니다. 따라서 JavaScript 멀티스레딩은 단일 스레드를 기반으로 시뮬레이션됩니다. 따라서 JavaScript는 단일 스레드 언어라는 점을 명심하십시오.

Event Loop

작업은 두 가지 범주로 나뉩니다.

• 동기 작업

• 비동기 작업

페이지를 열 때 페이지 렌더링은 로딩과 같은 많은 동기 작업입니다. 사진 및 오디오 리소스를 소비하는 작업은 비동기 작업입니다. 타임 루프의 주요 내용은 다음과 같습니다.

1. 작업이 실행 스택에 들어갈 때 동기 작업인지 비동기 작업인지 확인하고, 실행을 위해 메인 스레드에 진입합니다. 이벤트 테이블에 함수를 등록합니다.

2. 지정된 이벤트가 완료되면 이벤트 테이블이 이 함수를 이벤트 큐로 이동합니다

3. 메인 스레드의 작업이 실행된 후 작업 큐로 이동하여 해당 함수를 읽고 메인 실행용 스레드

4. 위 프로세스가 계속 반복되어 이벤트 루프를 구성합니다

js 엔진에는 메인 스레드 실행 스택이 비어 있는지 지속적으로 확인하는 모니터링 프로세스가 있습니다. 함수 호출을 기다리고 있는지 확인하기 위해 시간 대기열로 이동합니다.

예:

setTimeout( function() {
    console.log(1)
}, 0)
console.log(2)

• 첫 번째 setTimeout이 이벤트 테이블에 들어갑니다

• Execute console.log(2)

• setTimeout에 의해 실행된 함수가 이벤트 큐에 들어갑니다

• 메인 스레드가 함수를 읽습니다. 이벤트 큐에서 실행

그래서 setTimeout(fn, 0) 함수를 설정해도 바로 실행되지는 않습니다. 그러나 메인 스레드가 비어 있어도 0ms에 도달할 수 없습니다. HTML 표준에 따르면 최소값은 4ms입니다. setTimeout(fn, 0)函数也不会立即执行的原因。不过即使主线程为空，0ms也是达不到的，根据HTML标准，最低是4ms。

setInterval

还有一个与setTimeout类似的函数，对于setInterval来说，是循环执行。对于执行顺序来说，setInterval会每隔指定的时间将注册的函数置入Event Queue，如果前面的任务耗时太久，那么同样需要等待。

但是需要注意的一点是，对于setInterval(fn, ms)来说，他并不是每过ms执行一次 ，而是每过 ms 会有fn进入任务队列。也就是说如果setInterval 的回调函数的执行事件如果超过延迟ms,那么就看不出来事件间隔了。

Promise 和 process.nextTick(callback)

除了广义的同步任务和异步任务之外，还有对任务更精细的划分，分为:

• macro-task（宏任务）：包括整体代码script、setTimeout、setInterval

• micro-task（微任务）：Promise、process.nextTick

事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

用一段代码来说明：

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

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

console.log('4');

• 这段代码作为宏任务，开始第一次循环

• 先遇到setTimeout，那么它的回调函数进入到宏任务事件队列中

• 遇到Promise,Promise立即执行，输出2，then任务进入到微任务事件队列中

• 下面遇到console，输出4

• 第一个宏任务结束，看微任务事件队列，执行then，输出3

• 第一轮循环结束，看宏任务队列中存在setTimeout的回调函数执行，输出1

• 所有结果为：2，4，3，1

好了了解了基本的原理之后，我们来看一个更复杂的：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

不知道大家答案是什么？接下来我们来进行分析一下：

第一轮：

1. 首先整段代码作为一个宏任务进入主线程，首先遇到console.log()输出1

2. 遇到第一个setTimeout()进入宏任务队列

3. 遇到Process.nextTick()

   setInterval🎜🎜setTimeout과 유사한 함수도 있습니다. setInterval의 경우 루프에서 실행됩니다. 실행 순서와 관련하여 setInterval은 등록된 함수를 지정된 간격으로 이벤트 큐에 배치합니다. 이전 작업이 너무 오래 걸리면 기다려야 합니다. 🎜🎜한 가지 주의할 점은 setInterval(fn, ms)의 경우 ms가 지날 때마다 실행되는 것이 아니라 ms가 지날 때마다 실행된다는 점입니다. code> 작업 대기열에 fn이 입력됩니다. 즉, setInterval의 콜백 함수 실행 이벤트가 ms 지연 시간을 초과하면 이벤트 간격이 표시되지 않습니다. 🎜🎜Promise 및 process.nextTick(콜백)🎜🎜일반화된 동기 작업 및 비동기 작업 외에도 작업을 다음과 같이 더 세부적으로 구분할 수 있습니다. 🎜🎜🎜🎜매크로 작업(매크로 작업): 포함 전체 코드 스크립트, setTimeout, setInterval🎜🎜🎜🎜micro-task(마이크로 태스크): Promise, process.nextTick🎜🎜🎜🎜이벤트 루프의 순서에 따라 js 코드의 실행 순서가 결정됩니다. 전체 코드(매크로 태스크)를 입력하면 첫 번째 사이클이 시작됩니다. 그런 다음 모든 마이크로태스크를 실행합니다. 그런 다음 매크로 작업을 다시 시작하고 실행할 작업 대기열 중 하나를 찾은 다음 모든 마이크로 작업을 실행합니다. 🎜🎜코드를 사용하여 설명하세요. 🎜rrreee🎜🎜🎜이 코드는 매크로 작업 역할을 하며 첫 번째 주기를 시작합니다🎜🎜🎜🎜먼저 setTimeout을 만난 다음 콜백 함수가 매크로에 들어갑니다. task 이벤트 큐에서 🎜🎜🎜🎜는 Promise를 발견하고, Promise가 즉시 실행되어 2를 출력하고, then 작업이 마이크로태스크 이벤트 큐에 들어갑니다. 🎜🎜 🎜🎜콘솔은 아래와 같습니다. 출력 4🎜🎜🎜🎜첫 번째 매크로 작업이 종료되고, 마이크로 작업 이벤트 큐를 살펴보고, then를 실행하고, 출력 3🎜🎜🎜🎜첫 번째 루프 라운드 매크로를 보세요 작업 대기열에 setTimeout 콜백 함수 실행이 있고 출력은 1🎜🎜🎜🎜입니다. 모든 결과는 2, 4, 3, 1🎜🎜🎜🎜자, 기본 원리를 이해한 후입니다. , 좀 더 복잡한 것을 살펴보겠습니다. 🎜rrreee 🎜당신의 대답이 무엇인지 모르겠어요? 다음으로 분석해 보겠습니다. 🎜🎜첫 번째 라운드: 🎜🎜🎜🎜먼저 전체 코드가 매크로 작업으로 메인 스레드에 들어가고 먼저 console.log()를 만나 1🎜🎜🎜을 출력합니다. 🎜첫 번째 setTimeout()을 만나고 매크로 작업 대기열에 들어갑니다🎜🎜🎜🎜Process.nextTick()을 만나고 마이크로 작업 대기열에 들어갑니다🎜

4. 그런 다음 Promise가 발생하고 즉시 실행되어 7이 출력됩니다. 그런 다음가 마이크로태스크 대기열에 추가되고 Promise，立即执行，输出7，then被添加到微任务队列

5. 遇到第二个setTimeout,进入宏任务队列

6. 然后执行两个微任务

7. 执行Process.nextTick()输出6

8. 执行then，输出8

这样第一轮循环就彻底结束了，进行第二轮事件循环，也就是第一个setTimeout

1. 首先遇到console.log()，输出2

2. 遇到Process.nextTick()，进入微任务队列

3. 遇到Promise立即执行输出4，then进入微任务队列

4. 然后执行第一个微任务，输出3

5. 执行then，输出5

这样第二轮事件循环就结束了，最后执行第二个setTimeout，第二个setTimeout和上面原理类似，也就不重复说明了。所以最终结果是：1,7,6,8,2,4,3,5,9,11,10,12

두 번째 setTimeout이 발생합니다. 매크로 작업 대기열을 입력하고

두 개의 마이크로 작업을 실행합니다

Process.nextTick()을 실행하고 출력 6

🎜 then을 실행, 출력 8🎜🎜🎜이렇게 하여 첫 번째 루프가 완전히 종료되고 첫 번째 setTimeout🎜

🎜🎜처음 console.log()를 발견하고, 출력 2🎜🎜🎜🎜 Process.nextTick()을 발견하고, 마이크로태스크 대기열에 들어갔습니다🎜🎜 🎜🎜 Promise로 이동하여 출력 4를 즉시 실행하고 그런 다음 마이크로 태스크 대기열 🎜🎜🎜🎜에 들어간 다음 첫 번째 마이크로 태스크를 실행하고 출력 3🎜🎜🎜🎜을 실행합니다. 출력 5🎜 🎜

🎜이렇게 하면 이벤트 루프의 두 번째 라운드가 종료되고, 마지막으로 두 번째 setTimeout이 실행됩니다. 두 번째 setTimeout은 다음과 유사합니다. 위의 원칙을 따르므로 설명하지 않습니다. 따라서 최종 결과는 다음과 같습니다. 1,7,6,8,2,4,3,5,9,11,10,12🎜🎜관련 권장 사항: 🎜🎜🎜js 실행 메커니즘에 대한 자세한 설명 예제🎜🎜 🎜🎜🎜JavaScript 실행 메커니즘의 이벤트 루프🎜🎜🎜🎜

위 내용은 JavaScript 실행 메커니즘에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!