Closed Tanney-102 closed 3 years ago
chrome의 v8과 같은 자바스크립트 엔진은 다음과 같이 구성된다.
<출처: "캡틴 판교 블로그", https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/>
자바스크립트를 사용하는 환경은 대부분 이벤트 기반으로 동작한다.
이벤트 기반
⇒ 미리 동작을 정해두고 이벤트가 발생할 때 실행한다.(콜백)
⇒ 네트워크 요청, 사용자 입력, 타이머 등
이벤트(입출력)는 느리다.
자바스크립트의 엔진은 싱글스레드이기 때문에 앞선 실행 문맥이 끝나지 않으면 다음을 실행할 수 없다.
즉, 상대적으로 '느린' 이벤트가 호출 스택에 push 되면 해당 이벤트에 대한 handle이 끝날 때까지 프로그램이 멈춘다.
⇒ 블로킹(앞선 작업이 다음 작업의 실행을 가로막는 방식)
따라서 적어도 '느린' 작업만큼은 '논블로킹'으로 처리해줄 필요가 있다.
<출처: "캡틴 판교 블로그", [https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/](https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/)>
Web APIs : 이벤트가 발생하면 콜백을 큐에 넣어준다.
⇒ 네트워크 요청에 대한 응답을 받으면, 사용자가 클릭을 하면, 타이머의 시간이 다 지나면....
Callback Queue : web api가 보내 준 콜백을 순서대로 저장한다.
⇒ 태스크 큐, 마이크로 태스크 큐 등 여러 큐가 있지만 자세히 알 필요는 없음
Event Loop : 콜스택이 비면 콜백 큐의 함수들을 하나씩 콜스택에 올린다.
참고 : 자바스크립트 런타임 실습, http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIGNvbnNvbGUubG9nKCdZb3UgY2xpY2tlZCB0aGUgYnV0dG9uIScpOyAgICAKfSk7Cgpjb25zb2xlLmxvZygiSGkhIik7CgpzZXRUaW1lb3V0KGZ1bmN0aW9uIHRpbWVvdXQoKSB7CiAgICBjb25zb2xlLmxvZygiQ2xpY2sgdGhlIGJ1dHRvbiEiKTsKfSwgNTAwMCk7Cgpjb25zb2xlLmxvZygiV2VsY29tZSB0byBsb3VwZS4iKTs%3D!!!PGJ1dHRvbj5jbGljayE8L2J1dHRvbj4%3D
리페인트가 진행되는 시점에 (리페인트 전에) 콜백을 호출
⇒ 요청되는 콜백의 수는 보통 디스플레이의 주사율과 일치
⇒ 콜백에는 timestamp가 인자로 전달
보통 애니메이션에 사용
재귀를 통해 사용하며 cancelAnimationFrame을 통해 멈출 수 있음
export default class Spinner { constructor($spinnerElement, degSpeed) { this.$spinnerElement = $spinnerElement; this.degSpeed = degSpeed; this.deg = 0; this.stop = false; } spin() { this.deg++; this.$spinnerElement.style.transform = `rotate(${ (this.deg % (360 / this.degSpeed)) * this.degSpeed }deg)`; const rafId = requestAnimationFrame(this.spin.bind(this)); this.stop && cancelAnimationFrame(rafId); } render() { this.$spinnerElement.classList.add("material"); this.spin(); } clear() { this.stop = true; this.$spinnerElement.classList.remove("material"); } }
이벤트 루프
자바스크립트 엔진
chrome의 v8과 같은 자바스크립트 엔진은 다음과 같이 구성된다.
이벤트 기반
자바스크립트를 사용하는 환경은 대부분 이벤트 기반으로 동작한다.
이벤트 기반
⇒ 미리 동작을 정해두고 이벤트가 발생할 때 실행한다.(콜백)
⇒ 네트워크 요청, 사용자 입력, 타이머 등
이벤트(입출력)는 느리다.
자바스크립트의 엔진은 싱글스레드이기 때문에 앞선 실행 문맥이 끝나지 않으면 다음을 실행할 수 없다.
즉, 상대적으로 '느린' 이벤트가 호출 스택에 push 되면 해당 이벤트에 대한 handle이 끝날 때까지 프로그램이 멈춘다.
⇒ 블로킹(앞선 작업이 다음 작업의 실행을 가로막는 방식)
따라서 적어도 '느린' 작업만큼은 '논블로킹'으로 처리해줄 필요가 있다.
이벤트 루프
Web APIs : 이벤트가 발생하면 콜백을 큐에 넣어준다.
⇒ 네트워크 요청에 대한 응답을 받으면, 사용자가 클릭을 하면, 타이머의 시간이 다 지나면....
Callback Queue : web api가 보내 준 콜백을 순서대로 저장한다.
⇒ 태스크 큐, 마이크로 태스크 큐 등 여러 큐가 있지만 자세히 알 필요는 없음
Event Loop : 콜스택이 비면 콜백 큐의 함수들을 하나씩 콜스택에 올린다.
참고 : 자바스크립트 런타임 실습, http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIGNvbnNvbGUubG9nKCdZb3UgY2xpY2tlZCB0aGUgYnV0dG9uIScpOyAgICAKfSk7Cgpjb25zb2xlLmxvZygiSGkhIik7CgpzZXRUaW1lb3V0KGZ1bmN0aW9uIHRpbWVvdXQoKSB7CiAgICBjb25zb2xlLmxvZygiQ2xpY2sgdGhlIGJ1dHRvbiEiKTsKfSwgNTAwMCk7Cgpjb25zb2xlLmxvZygiV2VsY29tZSB0byBsb3VwZS4iKTs%3D!!!PGJ1dHRvbj5jbGljayE8L2J1dHRvbj4%3D
setTimeout, setInterval, requestAnimationFrame
setTimeout
setInterval
requestAnimationFrame
리페인트가 진행되는 시점에 (리페인트 전에) 콜백을 호출
⇒ 요청되는 콜백의 수는 보통 디스플레이의 주사율과 일치
⇒ 콜백에는 timestamp가 인자로 전달
보통 애니메이션에 사용
재귀를 통해 사용하며 cancelAnimationFrame을 통해 멈출 수 있음