javascript 이벤트 순환 이벤트 loop 의 간단 한 모델 해석 및 응용 분석
js 는 단일 스 레 드 이지 만 이벤트 loop 의 등장 으로 js 는 높 은 병행 을 처리 할 수 있 는 성능 을 가지 게 되 었 다.그럼 이벤트 루프 는 어떻게 이해 하나 요?인터넷 바 이 두 의 한 무더기 의 글,무슨 힙,stack,micro queue,macro queue 는 초보 자 들 을 직접 멍 하 게 합 니까?여기 서 아주 통속 적 인 이해 방식 으로 이벤트 루프 를 소개 합 니 다.
이벤트 loop 은 말 그대로 이벤트 순환 입 니 다.순환 인 이상 순환 하 는 것 은 무엇 입 니까?
js 파일 에 대해
1.현재 실행 중인 컨 텍스트(첫 번 째 는 전역 역할 영역)의 모든 동기 화 작업 을 수행 합 니 다.비동기 작업 의 투과 가 있 습 니 다.
2.퀘 스 트 대기 열 에서 첫 번 째 비동기 퀘 스 트 를 수행 합 니 다.
3.현재 비동기 작업 을 수행 하고 문맥 의 모든 동기 화 작업 을 수행 하 며 비동기 작업 이 있 습 니 다.
위의 실행 순서 에서 순환 이 무엇 을 수행 하 는 지 똑똑히 볼 수 있 습 니 다.이벤트 loop 순환 에서 의 순환 작업 은 다음 과 같 습 니 다.
상하 문 을 실행 하 는 모든 동기 화 작업 을 수행 하고 비동기 작업 을 보 여 줍 니 다
간단 한 실례 를 보십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>event-loop-test</title>
</head>
<body>
<script>
setTimeout(function(){
console.log(' ')
new Promise(function(resolve,reject){
resolve(' ')
}).then(function(data){
console.log(data)
})
console.log(' 111')
for(var i = 0; i<5000; i++){
console.log(' ')
}
setTimeout(function(){
console.log(22222) // testPromise ， for ，testPromise ，
},0)
},0)
for(var i = 0; i<5000; i++){
console.log(' event loop')
}
for(var i = 0; i<5000; i++){
console.log(' event loop2')
}
var testPromise = new Promise(function(resolve,reject){
console.log(' promiseneibu')
setTimeout(function(){
resolve('promise ')
console.log('promise console')
},10)
})
testPromise.then(function(data){
console.log(data)
})
console.log(' ')
</script>
</body>
</html>
위의 실례 와 분석 을 통 해 알 수 있다.
작업 대기 열 에 있 는 비동기 작업 의 투과 순환 등급 은 관계 가 없 으 며,작업 대기 열 에 있 는 비동기 작업 은 투과 선후 순서에 따라 배열 되 어 있다.
간단 한 모델 만 들 기:
다음 과 같이 이해 할 수 있다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 에 관심 이 있 는 독 자 는 본 사이트 의 주 제 를 볼 수 있다.,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
