JS 실행 메커니즘에 대한 간략한 분석
- 零到壹度원래의
- 2018-03-28 14:55:271379검색
이 기사는 주로 JS 실행 메커니즘을 간략하게 분석하는 방법을 공유하며 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터와 함께 구경하러 오세요
우선 2가지 사항을 꼭 기억해주세요:
(1) JS는 싱글 스레드 언어입니다
(2) JS의 이벤트 루프는 JS 실행 메커니즘입니다. JS 실행에 대한 깊은 이해는 JS
1의 이벤트 루프에 대한 깊은 이해와 동일합니다. 세 가지 핵심 질문: JS가 단일 스레드인 이유는 무엇입니까? 단일 스레드는 어떻게 달성합니까?
기술 외관은 실제 세계의 응용 시나리오와 밀접한 관련이 있습니다.
마찬가지로 실제 시나리오를 바탕으로 이 세 가지 질문에 답할 것입니다
(1) JS가 단일 스레드인 이유는 무엇입니까?
JS는 원래 브라우저에서 사용하도록 설계되었으므로 JS가 브라우저는 멀티스레드입니다.
|
1 2 3 4 5 |
시나리오 설명:
이제 2 프로세스,process1이 있습니다. process2,있으니까 많은 JS,가 동일한 dom,에서 동시에 작동하도록
process1 이 dom,및 process2을 삭제했습니다. 이것을 편집했습니다 dom,문제 2 모순되는 명령을 동시에,브라우저는 어떻게 실행해야 할까요? |
이렇게 생각해보면 JS가 왜 단일 스레드로 설계되었는지 이해하기 쉬울 것입니다.
(2) JS에 비동기가 필요한 이유는 무엇입니까?
|
1 2 3 4 |
장면 설명:
JS에 비동기 이 없으면 는 위에서 아래로만 실행될 수 있습니다 , 이전 줄의 구문 분석 시간이 매우 길면 , 다음 코드가 차단됩니다. 사용자의 경우,차단은"걸림"을 의미,이로 인해 사용자 경험이 매우 저하됩니다 |
그래서 JS에는 비동기 실행이 존재합니다.
(3) 단일 스레드 JS는 어떻게 비동기 구현을 달성합니까?
JS는 단일 스레드이고 하나의 스레드에서만 실행될 수 있으므로 어떻게 비동기 구현을 달성합니까?
예 이벤트 루프(이벤트 루프), 이벤트 루프 메커니즘을 이해하면 JS
2의 실행 메커니즘을 이해하게 됩니다. JS
예제 1의 이벤트 루프(1), 실행 순서를 관찰하세요
console.log(1)
setTimeout(function(){
console.log(2)
},0)
console.log(3)run 결과는 다음과 같습니다. 1 3 2
즉, setTimeout의 함수는 즉시 실행되지 않고 일정 시간 지연되어 특정 조건이 충족된 후에만 실행되는 유형의 코드를 비동기 코드라고 합니다.
여기서 우리는 먼저 작업을 동기 작업과 비동기 작업으로 나누는 JS의 분류 방법을 알고 있습니다.
그림 설명
이 분류 방법에 따르면 JS의 실행 메커니즘은
첫번째 all JS가 동기식인지 비동기식인지 결정합니다. 동기식일 때는 메인 프로세스에 들어가고, 비동기식일 때는 이벤트 테이블에 들어갑니다. 트리거 조건이 충족되면 이벤트에 푸시됩니다. 대기열. 동기 작업은 기본 프로세스에 들어갑니다. 스레드는 기본 스레드가 유휴 상태가 될 때까지 계속 실행됩니다. 그런 다음 실행 가능한 비동기 작업이 있는지 확인하기 위해 이벤트 대기열로 이동합니다.
- 위의 세 단계는 루프에서 실행됩니다. 이것이 이벤트 루프입니다.
위의 예에서 실행 순서를 설명해 주실 수 있나요?
1
2
3
4
5
콘솔 .log(1) 동기화 작업,메인스레드에 올려두세요
”queue里 제어 스트립이 인쇄된 후 ,메인 스레드는 event queue(Event Queue)로 이동하여 실행 가능한 함수가 있는지 확인하고,에서 함수를 실행합니다. setTimeout
3.JS中的event loop(2)
所以,上面关于event loop就是我对JS执行机制的理解,直到我遇到了下面这段代码
例2:
setTimeout(function(){ console.log('定时器开始啦') }); new Promise(function(resolve){ console.log('马上执行for循环啦'); for(var i = 0; i尝试按照,上文我们刚学到的JS执行机制去分析
1
2
3
4
5
6
7
setTimeout 은 비동기 작업입니다. ,는 event table
new 에 배치됩니다. 약속 은 동기화 작업 , 이 배치되었습니다. 메인에서 , 인쇄를 직접 실행 console.log('Execute the for loop now')
. 그럼 예 비동기 작업 ,은 event table
에 배치됩니다.console.log('코드 실행 종료')은 동기화 코드이며,메인 프로세스에 배치,직접 실행
그렇다면 결과는 [for 루프 즉시 실행 - 코드 실행 종료 - 타이머 시작 후 함수 실행] 인가요?
직접 실행해 보니 결과는 이렇지 않지만 [for 루프 즉시 실행 - 코드 실행] 종료됩니다. —then 함수 실행 —타이머 시작]
그럼 비동기 작업의 실행 순서는 전후 순서가 아닌 다른 규정인가요? 사실 비동기와 동기의 구분은 정확하지 않습니다.
정확한 분할 방법은 다음과 같습니다.
macro-task(macro-task): 전체 코드 스크립트 포함, setTimeout, setInterval
micro-task(micro-task): Promise, process.nextTick
이 분류 방법에 따르면 JS의 실행 메커니즘은
매크로 작업을 실행하는 것입니다. 프로세스 중에 마이크로 작업이 발생하면 마이크로 작업의 [이벤트 큐]에 배치됩니다. task
현재 매크로 작업 실행이 완료되면 마이크로태스크의 [이벤트 큐]가 표시되고, 그 안의 모든 마이크로태스크가 순차적으로 실행되며, 위의 2단계를 반복하고 이벤트 루프를 결합합니다( 1) JS 실행 메커니즘이 더 정확한 이벤트 루프(2)입니다.
방금 배운 실행 메커니즘에 따라 예제 2를 분석해 보세요.
11
12 13
14먼저 script에서 매크로 작업 을 실행하고, 발생 setTimeout, 매크로 작업의 [대기열]에 넣습니다.
발생 new Promise 직접 실행해 보세요. ,Print"지금 for 루프를 실행하세요"
만남 thenmethod,마이크로 태스크,마이크로 태스크의 [큐]에 넣기
Print "코드 실행이 종료됩니다."
이 매크로 작업 라운드가 실행되었습니다,이 마이크로 작업 라운드 보기, then 메서드에서 함수를 찾았습니다 Print"실행 그런 다음 "
이것입니다,이번 라운드의 이벤트 loop 이 모두 완료되었습니다.
下一轮的循环里,先执行一个宏任务,发现宏任务的【队列】里有一个 setTimeout里的函数,执行打印"定时器开始啦"
所以最后的执行顺序是【马上执行for循环啦 — 代码执行结束 — 执行then函数啦 — 定时器开始啦】
4. 谈谈setTimeout
这段setTimeout代码什么意思? 我们一般说: 3秒后,会执行setTimeout里的那个函数
setTimeout(function(){ console.log('执行了') },3000)但是这种说并不严谨,准确的解释是: 3秒后,setTimeout里的函数被会推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行。
所以只有满足 (1)3秒后 (2)主线程空闲,同时满足时,才会3秒后执行该函数
如果主线程执行内容很多,执行时间超过3秒,比如执行了10秒,那么这个函数只能10秒后执行了
위 내용은 JS 실행 메커니즘에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!