수색…
웹 브라우저의 이벤트 루프
대다수의 현대 자바 스크립트 환경은 이벤트 루프 에 따라 작동 합니다 . 이는 컴퓨터 프로그램에서 공통적으로 사용되는 개념입니다. 이는 프로그램이 새로운 일이 일어나기를 계속해서 기다리고, 그럴 때마다 그 일에 반응한다는 것을 의미합니다. 호스트 환경 이 프로그램을 호출하여 이벤트 루프에서 "turn"또는 "tick"또는 "task"를 생성 한 다음 실행을 완료 합니다. 그 턴이 끝나면 호스트 환경은 모든 일이 일어나기 전에 다른 일이 일어날 때까지 기다린다.
간단한 예가 브라우저에 있습니다. 다음 예제를 고려하십시오.
<!DOCTYPE html>
<title>Event loop example</title>
<script>
console.log("this a script entry point");
document.body.onclick = () => {
console.log("onclick");
};
setTimeout(() => {
console.log("setTimeout callback log 1");
console.log("setTimeout callback log 2");
}, 100);
</script>
이 예제에서 호스트 환경은 웹 브라우저입니다.
- HTML 파서는 먼저
<script>실행합니다. 완료 될 때까지 실행됩니다. -
setTimeout호출하면 브라우저에 100 밀리 초가 지나면 주어진 작업 을 수행하기위한 작업 을 대기열에 넣어야 함을 알립니다. - 그 동안 이벤트 루프는 웹 페이지를 렌더링하는 것과 같이 할 일이 있는지 계속 확인해야합니다.
- 100 밀리 초가 지나면 이벤트 루프가 다른 이유로 사용 중이 지 않으면
setTimeout대기열에 포함 된 작업이 표시되고 함수를 실행하여 두 문을 로깅합니다. - 누군가가 몸을 클릭하면 언제든지 브라우저는 클릭 루프 처리 기능을 실행하기 위해 이벤트 루프에 작업을 게시합니다. 이벤트 루프는 계속해서 무엇을해야 할지를 점검하면서 진행되며,이 기능을 실행합니다.
이 예제에서 이벤트 루프가 호출하는 JavaScript 코드에 대한 여러 유형의 진입 점이있는 것을 볼 수 있습니다.
-
<script>요소가 즉시 호출됩니다. -
setTimeout태스크가 이벤트 루프에 게시되고 한 번 실행됩니다. - 클릭 핸들러 작업을 여러 번 게시하고 매번 실행할 수 있습니다.
이벤트 루프의 각 턴은 많은 일을 담당합니다. 이들 중 일부만이 JavaScript 작업을 호출합니다. 자세한 내용은 HTML 사양을 참조하십시오.
마지막으로, 각 이벤트 루프 태스크가 "완료까지 실행 됨"이라고 말하면 무엇을 의미합니까? 일반적으로 작업으로 실행되도록 대기중인 코드 블록을 인터럽트 할 수는 없으며 다른 코드 블록으로 인터리브 된 코드를 실행할 수 없습니다. 예를 들어 완벽한 시간에 클릭 한 경우에도 위의 코드를 사용하여 두 번의 setTimeout callback log 1/2" 사이에 "onclick" 을 기록 할 수 없습니다. 이는 작업 게시가 작동하는 방식 때문입니다. 선점 대신 협력 및 대기열 기반입니다.
비동기 작업 및 이벤트 루프
일반적인 자바 스크립트 프로그래밍 환경에서 흥미로운 작업은 비동기식입니다. 예를 들어, 브라우저에서 우리는
window.setTimeout(() => {
console.log("this happens later");
}, 100);
Node.js에서는 다음과 같은 것을 볼 수 있습니다.
fs.readFile("file.txt", (err, data) => {
console.log("data");
});
이것이 이벤트 루프와 어떤 관련이 있습니까?
이것이 작동하는 방식은 이러한 명령문이 실행될 때 호스트 환경 (예 : 브라우저 또는 Node.js 런타임)이 다른 스레드에서 벗어나 무언가를 수행 할 것임을 알려주는 것입니다. 호스트 환경이 (각각 100 밀리 초를 기다리거나 file.txt 파일을 읽는) 그런 일을 마쳤을 때, 이벤트 루프에 "이전에이 인수들과 함께 주어진 콜백 호출"이라는 태스크를 게시 할 것입니다.
이벤트 루프는 웹 페이지 렌더링, 사용자 입력 듣기, 지속적으로 게시 된 작업 찾기와 같은 일을하면서 바쁘다. 게시 된 작업에서 콜백을 호출하면 JavaScript로 다시 콜백합니다. 이것이 비동기식 동작을 얻는 방법입니다.