집 > 기사 > 웹 프론트엔드 > JS의 단일 스레드 및 이벤트 루프에 대한 자세한 설명

JS의 단일 스레드 및 이벤트 루프에 대한 자세한 설명

小云云원래의: 2018-03-31 17:16:373517검색

Js는 단일 스레드이며 js 코드는 위에서 아래로 순차적으로 실행됩니다. 예를 들어 두 개의 함수를 작성하면 위쪽 함수가 먼저 실행되고 아래쪽 함수가 나중에 실행됩니다. 그러나 이러한 종류의 단일 스레드에는 매우 큰 문제가 있습니다. 즉, 시간이 많이 걸리는 작업에 직면하면 후속 작업은 해당 작업이 완료된 후에만 수행할 수 있습니다. 예를 들어, Ajax 요청은 본질적으로 시간이 많이 걸리는 서버에서 데이터를 가져옵니다. 그러면 결과가 반환될 때까지만 기다릴 수 있습니다. 그런 다음 이를 실행합니다. 대기 프로세스 동안 사용자는 무엇을 할 수 있습니까? 렌더링 단계에서는 UI가 렌더링되지 않습니다. 빈 페이지가 있고 경험이 너무 좋지 않습니다.

이런 시간이 많이 걸리는 작업을 처리하기 위해 js는 이를 제쳐두고 후속 작업을 먼저 실행한 다음 다시 돌아와 시간이 많이 걸리는 작업을 처리하기로 결정했습니다. 코드를 작성하는 순서가 코드가 실행되는 순서와 일치하지 않기 때문에 비동기 개념이 도입됩니다. 아래에는 두 가지 기본 함수와 ajax 함수(비동기 작업용)가 있지만 실행 순서는 add ->

function add(num1,num2) {    return num1 + num2;
}function subtract(num1,num2) {    return num2 - num1
}function ajax() {    var url = &#39;http://jsonplaceholder.typicode.com/posts/1&#39;;    var xhr = new XMLHttpRequest();
    xhr.open("GET",url); 
    xhr.onload= function () {
        console.log(xhr.responseText)
    }
    xhr.send()
}ajax();

console.log(add(3,5))

console.log(subtract(3,5))

이것은 또 다른 질문으로 이어집니다. 비동기 작업은 어디에 배치됩니까? 나중에 언제 실행되나요? 사실 여기서 문제에 주목해야 합니다. 실제로 ajax 작업을 수행하는 것은 js가 아니라 브라우저에서 발행한 http 요청입니다. js가 ajax 함수를 실행하면 실제로 브라우저에 http 요청을 실행하라고 지시한 다음 즉시 반환되어 그 뒤에 있는 코드, 즉 더하기 및 빼기 함수를 실행합니다. 그렇다면 브라우저가 http 요청을 실행하고 서버에서 데이터를 가져온 후에는 무엇을 해야 할까요? 그런 다음 반환된 데이터를 콜백 함수에 전달하는 콜백 함수(onload 함수)를 실행한 다음 콜백 함수를 이벤트(작업) 대기열에 삽입합니다. js가 더하기 및 빼기 기능 실행을 마치면 아무 작업도 수행하지 않습니다. 폴링하자마자 onload 콜백 함수가 있음을 발견하고 이를 가져옵니다. 이 기능을 실행하고 실행하세요. 프로그램이 실행되는 동안 js는 프로그램이 끝날 때까지 계속해서 폴링을 수행합니다.

　Js 코드는 전체 프로그램 실행 과정에서 두 부분으로 나뉘는데, 하나는 add 함수와 같고 다른 하나는 ajax onload 콜백 함수와 같습니다. 이에 따라 js 작업도 두 부분으로 나누어집니다. 메인 스레드이고 다른 하나는 작업(비동기 콜백 함수) 대기열입니다.

　js 코드의 구체적인 동작은 다음과 같습니다.

　1. js 코드가 로드되자마자 위에서 아래로 순차적으로 실행됩니다. 또한 전역 실행 환경에 들어갑니다. 비동기 Ajax 작업에서는 브라우저가 요청을 실행한 후 즉시 반환합니다. 다음 코드를 실행하면 add 함수 호출을 만나면 함수 실행 환경으로 들어가고 다시 빼기 함수를 만나게 됩니다. , 그리고 다시 함수 실행 환경으로 들어갑니다. 물론 여기서는 더 간단합니다. 중첩된 함수가 없습니다. 함수 안에 중첩된 함수가 있으면 아래 그림과 같이 하위 함수의 실행 환경으로 들어가 실행 스택을 형성합니다. 전역 실행 환경의 코드 실행이 완료되면 js의 메인 스레드인 실행 스택이 비어 있습니다.

　　2. 브라우저는 앞으로는 서버에서 데이터를 얻거나 실패할 것입니다. 이때 우리가 등록한 성공 또는 실패 콜백 함수를 작업에 넣습니다. ) 대기열 인스턴스에 있습니다.

　　3. 실행 스택의 모든 코드가 실행될 때, 즉 실행 스택이 비어 있을 때 js는 작업 대기열을 폴링합니다(왼쪽 그림). 작업 큐에서 검색 시작 위치에서 첫 번째 작업(등록된 콜백 함수)을 꺼내서 실행 스택에 올려 실행합니다(오른쪽 그림). 콜백 함수가 실행되면 실행 스택이 다시 비게 됩니다. 그리고 js는 작업 대기열을 폴링합니다. 콜백 함수가 있으면 첫 번째 함수를 가져와 실행을 위해 실행 스택에 넣습니다. 전체 프로그램이 실행되는 동안 js는 작업 대기열을 계속 폴링합니다. 작업이 있으면 이것이 이벤트 루프입니다.

모든 프로그램은 스택에서 실행됩니다. 실행 스택이 비어 있는 경우에만 다음 작업을 처리할 수 있습니다. 함수가 실행 스택에 들어가는 한 스택은 비어 있지 않습니다. 스택이 비어 있지 않으면 다음 함수를 처리할 수 없으며 함수가 실행될 때까지만 기다릴 수 있습니다. 이를 "실행 후 완료"라고 하며 한 번에 한 가지 작업만 수행할 수 있습니다. 또한 콜백 함수가 너무 많은 작업을 수행할 수 없어야 합니다. 너무 많은 작업이 수행되면 스택이 비어 있지 않아 다음 작업이 실행되지 않아 차단이 발생합니다.

위의 내용은 js에서 비차단입니다.

JS의 단일 스레드 및 이벤트 루프에 대한 자세한 설명

관련 기사