몇 가지 면접 문제로 JavaScript 실행 메커니즘 보기

앞말

자바스크립트의 운행 환경에 따라 단일 루트로 잠그고 작업은 줄을 서서 수행해야 한다. 만약에 사이트 자원이 비교적 크면 브라우저 불러오는 속도가 매우 느리지만 실제로는 그렇지 않다. 여러분은 즉시 동기화와 비동기화를 생각했을 것이다.
이른바 동기화와 비동기화도 줄을 서는 것이지만 줄을 서는 곳은 다르다.

동기식 및 비동기식

동기화 작업은 주 스레드 대기열에 들어가고, 비동기화 작업은 이벤트 대기열에 들어갑니다.
동기화 작업과 비동기화 작업은 서로 다른 대기열에 들어간다. 즉, 위에서 말한 서로 다른 곳에서 줄을 서는 것이다.
동기화 작업이 주 스레드에 들어가고 비동기화 작업이 이벤트 대기열에 들어가며 주 스레드 작업이 완료되고 이벤트 대기열에 실행을 기다리는 작업이 주 스레드에 들어가서 이벤트 대기열에 작업이 모두 실행될 때까지 실행됩니다.

식욕을 돋우는 요리

console.log('a')

setTimeout(function(){
    console.log('b')
}, 200)

setTimeout(function(){
    console.log('c')
}, 0)

console.log('d')

a d c b
위쪽에서 아래로, 메인 라인에 들어갈 때 메인 라인에 들어갈 때, 이벤트 대기열에 들어갈 때 이벤트 대기열에 들어갈 것이다.
그러면 메인 라인에 콘솔이 존재합니다.log ('a') 및 console.log('d'), 타이머 setTimeout은 일정 시간 실행을 지연합니다. 말 그대로 비동기적인 작업이 이벤트 대기열에 들어가서 메인 작업이 끝날 때까지 기다렸다가 메인 라인에 들어갑니다.
타이머의 지연 시간은 0이 즉각 실행되는 것이 아니라 다른 타이머보다 먼저 메인 라인에 들어가 실행되는 것을 나타낸다.

한 판 더하다

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i)
    }, 1000)
}

결과: 10개
매번 for 순환이 setTimeout을 만나면 이벤트 대기열에 넣고 실행을 기다립니다. 모든 순환이 끝날 때까지 i는 전역 변수로 순환이 끝난 후 i=10, 다시 setTimeout을 실행할 때 i의 값은 10이고 결과는 10개입니다.
var를 let으로 바꿉니다. 변수 역할 영역이 다르고 let은 현재 순환 중입니다. 따라서 이벤트 대기열에 들어간 타이머는 매번 i가 다르고 마지막 인쇄 결과는 0 1 2...구.

매크로 작업 마이크로 작업

자주 말하는 동기화 작업과 비동기화 작업을 제외하고는 매크로 작업, 마이크로 작업으로 나눌 수 있다
주요 매크로 작업: 전체 스크립트 scriptsetTimeoutsetTimeout...
주요 마이크로퀘스트:promise.then...
프로세스 수행:
1. 전체 스크립트 스크립트는 매크로 작업으로 시작
2. 마이크로퀘스트를 만나 마이크로퀘스트 대기열에 밀어넣고, 매크로퀘스트를 매크로퀘스트 대기열에 밀어넣기
3. 매크로 작업 완료, 실행 가능한 마이크로 작업 있는지 확인
4. 실행 가능한 마이크로 퀘스트가 발견되면 모든 마이크로 퀘스트를 완료합니다
5. 모든 작업이 완료될 때까지 새 매크로 작업을 시작합니다.

Promise 한 판.

const p = new Promise(resolve => {
    console.log('a')
    resolve()
    console.log('b')
})

p.then(() => {
    console.log('c')
})

console.log('d')

결과: a b d c
1. 전체 스크립트가 매크로 작업 대기열에 들어가서 실행하기
2.promise 생성 즉시 실행, 인쇄 ab
3. 약속을 만나다.then 마이크로퀘스트 대기열 진입
4. 콘솔을 만난다.log('d') 인쇄 d
5. 전체 코드는 매크로 작업으로 실행됩니다. 실행할 수 있는 마이크로 작업이 있습니다. 마이크로 작업을 시작하고 c를 인쇄합니다.

setTimeout(function(){
    console.log('setTimeout')
}, 0)

const p = new Promise(resolve => {
    console.log('a')
    resolve()
    console.log('b')
})

p.then(() => {
    console.log('c')
})

console.log('d')

결과: a b d c setTimeout
1.setTimeout 매크로 작업 대기열 진입
2.promise 생성 즉시 실행, 인쇄 ab
3. 약속을 만나다.then 마이크로퀘스트 대기열 진입
4. 콘솔을 만난다.log('d') 인쇄 d
5. 실행 가능한 마이크로 작업이 있습니다. c 인쇄
6. 마이크로 작업 완료, 새로운 매크로 작업 시작, setTimeout 실행 시작, setTimeout 인쇄

setTimeout(function(){
    console.log('setTimeout')
}, 0)

const p = new Promise(resolve => {
    console.log('a')
    resolve()
    console.log('b')
})

p.then(() => {
    console.log('c')
    setTimeout(function(){
        console.log('then setTimeout')
    }, 0)
})

console.log('d')

결과: a b d c setTimeout then 의 setTimeout
1. 동상
2. 마이크로 작업 인쇄 c를 실행하고 setTimeout을 만나 매크로 작업 대기열에 밀어넣기
3. 타이머 지연 시간이 같으면 매크로 작업을 순서대로 실행하고 setTimeoutthen의 setTimeout을 인쇄합니다

타이머를 좀 더 넣다

console.log('a');

new Promise(resolve => {
    console.log('b')
    resolve()
}).then(() => {
    console.log('c')
    setTimeout(() => {
      console.log('d')
    }, 0)
})

setTimeout(() => {
    console.log('e')
    new Promise(resolve => {
        console.log('f')
        resolve()
    }).then(() => {
        console.log('g')
    })
}, 100)

setTimeout(() => {
    console.log('h')
    new Promise(resolve => {
        resolve()
    }).then(() => {
        console.log('i')
    })
    console.log('j')
}, 0)

결과: a b c h j i d e f g
1. 인쇄 a
2.promise 즉시 실행, 인쇄 b
3.promise.then 마이크로퀘스트 대기열 밀어넣기
4.setTimeout 매크로 작업 대기열 밀어넣기
5. 전체 코드 실행 완료, 마이크로 작업 시작, c 인쇄, setTimeout 매크로 작업 대기열 밀어넣기 실행 대기
6. 실행 가능한 마이크로 작업이 없으면 매크로 작업을 시작하고 타이머는 지연 시간에 따라 줄을 서서 실행합니다
7. hj, promise 인쇄.then 밀어넣기 마이크로퀘스트 대기열
8. 실행 가능한 마이크로 작업, 인쇄 i, 매크로 작업 계속, 인쇄 d
9. 100으로 지연되는 매크로 작업, e f 인쇄, 마이크로 작업 인쇄 g, 모든 작업 완료

단순 테스트

console.log('start')

a().then(() => {
  console.log('a_then')
})

console.log('end')

function a() {
  console.log('a_function')
  return b().then((res) => {
    console.log('res', res)
    console.log('b_then')
    return Promise.resolve('a ')
  })
}

function b() {
  console.log('b_function')
  return Promise.resolve(' ')
}

결과: start a_function b_function endres 반환값 b_then a_then
상기 예시의 절차 설명에 근거하여 이것을 생각하고 이해를 깊이 있게 하다

총결산

JavaScript 단일 스레드, 작업은 줄을 서서 수행해야 합니다

동기화 작업은 메인 라인에 들어가서 줄을 서고, 비동기화 작업은 이벤트 대기열에 들어가서 메인 라인에 밀려오기를 기다립니다

행 타이머의 지연 시간은 0이 즉각 실행되는 것이 아니라 다른 타이머보다 더 일찍 실행되는 것을 나타낸다

매크로 임무와 마이크로 임무로 js 집행 메커니즘을 더욱 이해한다

전체 코드는 매크로 작업으로 실행을 시작하고 실행 과정에서 매크로 작업과 마이크로 작업은 상응하는 대기열에 들어간다

전체 코드 실행이 끝났습니다. 마이크로퀘스트 대기열에 실행을 기다리는 퀘스트가 있는지 확인하고, 없으면 모든 마이크로퀘스트를 실행합니다

새로운 매크로 임무를 수행하고 새로운 매크로 임무를 수행한다. 매크로 임무를 수행하는 과정에서 마이크로 임무를 만나면 이를 마이크로 임무 대기열에 밀어넣고 실행한다

모든 임무가 끝날 때까지 반복한다

이상은 몇 가지 면접 문제로 자바스크립트 실행 메커니즘의 상세한 내용을 보십시오. 자바스크립트 실행 메커니즘에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!