브라우저의 동작원리
2024-05-20 오후 08시 08분
2024-06-22 오후 08시 08분
자바스크립트는 대표적인 웹 인터프리터 언어입니다.
개요
크롬의 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 Node.js 의 등장으로 인해
자바스크립트는 웹 브라우저를 벗어나 서버와 애플리케이션에서도 활용되는 범용적인 개발언어가 되었다.
- 서버에 요청
(Request)
- 서버의 응답
(Response)
- 브라우저에 표시
위의 과정을 걸쳐 우리에게 화면을 보여준다.
HTML Parse는 HTML 진행중 Script를 태그를 만날 경우
DOM 생성프로세스를 일시적으로 중지하고 자바스크립트 엔진에게 제어 권한을 넘긴다.
그 후 자바스크립트의 실행이 완료되면 다시 브라우저가 중지했던 시점으로부터 DOM생성을 재개한다.
이렇게 동기적으로 html, css, javascript를 생성하는게 장점이자 단점이 되기도한다.
웹브라우저에서는 javascript가 실행될 때, 동기적인 코드가 존재하고 비동기적인 코드가 존재한다.
우리가 평상시 선언하는 변수와 함수들은 동기적인 코드라고 할 수 있고
AddEventListener, setTimeout, setInterval은 비동기적인 코드라고 할 수 있다.
console.log(1);
setTimeout(() => console.log(2), 1000);
console.log(3);
다음과 같이 코드를 작성했다고 해보자,
기대하는 결과는 2가 출력되고 1초뒤 3이 출력되는거지만
실제로는 1,3,2가 출력된다. 왜 이렇게 될까?
자바스크립트 내부에서는 비동기적인 코드만 따로 구별해서 모아두고,
가장 먼저 호출된 녀석부터 Queue라는 장소에 대기를 시켜 줄을 세운다.
그후 Stack에서 이전 작업이처리되면 다음 Queue를 넘겨주는 식으로 처리를 진행한다.
Stack에서는 한번에 하나의 코드만 처리할 수 있기 때문에 먼저 Stack이 비기전까지 Queue의 코드가 출력되지 않는 것이다.
자바스크립트는 동기적인 언어면서 비동기적인 처리를 지원하고,
이러한 언어가 어떻게 흘러갈지 고려하면서 코딩을 하는것이 자바스크립트를 이해하는 과정에서 가장 중요한 것이다.
댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.
