이 기사는 주로 JS 실행 메커니즘을 간략하게 분석하는 방법을 공유하며 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터와 함께 구경하러 오세요
우선 2가지 사항을 꼭 기억해주세요:
(2) JS의 이벤트 루프는 JS 실행 메커니즘입니다. JS 실행에 대한 깊은 이해는 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
예제 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执行机制去分析
그렇다면 결과는 [for 루프 즉시 실행 - 코드 실행 종료 - 타이머 시작 후 함수 실행] 인가요? 직접 실행해 보니 결과는 이렇지 않지만 [for 루프 즉시 실행 - 코드 실행] 종료됩니다. —then 함수 실행 —타이머 시작] 그럼 비동기 작업의 실행 순서는 전후 순서가 아닌 다른 규정인가요? 사실 비동기와 동기의 구분은 정확하지 않습니다. 정확한 분할 방법은 다음과 같습니다.
이 분류 방법에 따르면 JS의 실행 메커니즘은
所以最后的执行顺序是【马上执行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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
관련 라벨：
원천：php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법
img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다.
d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트
나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출
JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
관련 주제
더>
|
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
