취준 때 공부를 했지만, 복습 겸 브라우저 엔진에 대해서 자세하게 알아보려고 한다.
브라우저 구성요소
브라우저 엔진에 대해 공부를 해보면, 해당 사진이 많이 뜨는 것을 볼 수 있다.
구성요소에 대해 살펴보자면
사용자 인터페이스: 사용자가 액션을 취하는 곳 (뒤로가기, 앞으로가기, 새로고침, url 입력하는 주소창)
- 해당 부분은 어떤 웹 사이트를 가도 변하지 않는 곳이다.
렌더링 엔진: 웹 사이트를 그리는 엔진
브라우저 엔진: 사용자가 액션을 취하여 렌더링 엔진에게 알려주는 곳 (가교역할 담당)
통신: 네트워크 (웹 사이트 호출, 데이터)
자바스크립트 해석기: 자바스크립트를 이해할 수 있도록 해석하는 곳
UI 백엔드: 기본적인 위젯을 그리는 인터페이스
자료 저장소: 브라우저가 정보를 저장하는 곳(로컬, 세션, 쿠키 등)
브라우저 엔진에 대해 알아보자~~
- 모든 웹 브라우저의 핵심이 되는 소프트웨어 구성 요소
웹 페이지를 사용자가 보는 화면으로 변환해주는 핵심 기술이다.
웹 사이트를 열어, 브라우저는 인터넷에서 HTML, CSS, JavaScript파일 같은 데이터들을 컴퓨터가 이해할 수 있는 언어에서 사용자가 이해할 수 있는 텍스트, 이미지, 버튼 등과 같은 화면에 표시하는 번역기 역할을 한다
브라우저 엔진 역할과 기능은 무엇일까?
브라우저 엔진은 크게 두가지의 역할로 나뉠 수 있다.
1. Rendering
2. JavaScript 실행
Rendering에 대해 먼저 알아보자
HTML & CSS를 해석해서 화면 구성
HTML 파싱 -> DOM 트리 생성
CSS 파싱 -> CSSOM 트리 생성
DOM + CSSOM 트리들이 합쳐져 RenderTree 생성
요소들의 위치를 계산하여 레이아웃을 잡고,
색상 및 스타일을 적용하여 페인팅하고,
해당 레이어들을 조합하는 컴포지팅을 하여 최종 화면에 출력하여 사용자의 눈에 보이게 된다.
여기서 끝이 아닌, 개발자들이 열심히 만든 기능들에 대해서는?!
JavaScript엔진에 대해 알아보자
JavaScript엔진은 브라우저가 JavaScript 코드를 이해하고 실행하도록 도와주는 소프트웨어
브라우저마자 JavaScript엔진이 다르며, 뒤에서 더 설명하겠다.
파싱, 컴파일, 실행 순서를 거쳐 자바스크립트엔진이 담당을 하는데
파싱
컴퓨터는 개발자가 작성한 JavaScript 코드를 그대로 실행할 수 없어 컴퓨터가 이해할 수 있는 구조로 변환하는 과정이다.
1. 어휘분석
코드에서 토큰을 추출합니다. 토큰은 작은 조각을 뜻하며
const a = 1;을 토큰으로 나누면
const, a, =, 1, ;로 5가지의 토큰으로 나오며
2. 구문 분석
해당 토큰을 AST(Abstract Syntax Tree)로 변환합니다.
해당 AST 를 그대로 실행하면 속도가 너무 느리기 때문에 바이트코드로 변환을 합니다.
컴파일
- 변환된 코드를 빠르게 실행할 수 있도록 최적화
JavaScript는 즉시 실행이 가능하도록 인터프리터와 컴파일러 두 가지의 방식을 사용하는데
인터프리터란? 한 줄씩 읽고 바로 실행
컴파일러? 자주 실행되는 코드는 (ex. 함수) 최적화하여 더 빠르게 변환하여 컴파일러와 인터프리터의 방식으로
실행 (Event Loop)
- 최종 실행이 되는데, 여기서! JavaScript는 싱글스레드 언어로
한 번에 하나의 작업만 실행할 수 있어, EventLoop를 이용하여 비동기 처리를 시켜줘야한다!
비동기 처리란? 비동기 코드는 기다리지 않고 바로 다음 코드로 넘어간다.
EventLoop에 대해서 알아보자
EventLoop는 JavaScript엔진이 비동기 코드를 실행할 때 언제 실행할지 결정한다.
호출 스택이 비었을 때, 작업 큐에 있는 비동기 작업을 하나씩 실행을 담당한다.
Call stack -> 실행할 함수들 관리 하는 공간
Web APIs-> 비동기 처리 공간(타이머, 네트워크 요청, DOM 이벤트, Promise같은 비동기 작업)
Callback Queue-> Web API에서 완ㄹ된 비동기 작업을 보관하는 공간 (click, keydown등도 포함)
Microtask Queue -> Callback Queue 보다 우선순위가 높은 비동기 작업 관리 공간 (Promise.then, catch, finally 등)
사진과 같이 이벤트 루프는
1. Call Stack
2. MicroTask Queue
3. Callback Queue 대기 작업 실행
순을 계속 반복하여 이루어진다
그럼 여기서 !
해당 사진에 대한 결과 값을 예상해볼 수 있을까?
코드 순서대로 동작을 보면
console.log("Start")가 CallbackQueue에 들어가고
console.log("Timeout")이 두번째로 실행이 되는데 WebApI에 먼저 들어가게 된다.
console.log("Promise")는 CallbackQueue 보다 우선순위가 높은 비동기 작업이므로 Microtask Queue에 들어가고,
console.log("End")는 CallbackQueue에 들어가게 된다.
CallbackQueue에 먼저 들어간 start가 출력이 되고, 그 다음으로 들어간 End, WebAPI에서 비동기 처리가 끝난 Timeout는 CallBackQueue에 들어가지만, Microtask Queue에 들어간 작업이 있으므로
CallBackQueue보다 Microtask Queue에 들어간 작업이 먼저 실행하게 된다.
즉, 한마디로
Start
End
Promise
Timeout순으로 출력이 되는 것을 볼 수 있다.
가비지 컬렉션은 그럼 뭐야?
JavaScript엔진은 메모리를 자동으로 관리하는데 그것의 역할이 바로 Garbage Collection이다.
Mark & Sweep 알고리즘 => 메모리 누수 방지
사용중인 객체는 마킹Mark하고, 마킹되지 않는 객체는 제거Sweep됩니다.
브라우저 엔진 종류
Blink: Google Chrome, Microsoft Edge
Webkit: Safari, 대부분의 IOS브라우저
Gecko: Mozilla Firefox
JacaScript 엔진 종류
v8: Chrome, Edge
JavaScriptCore: Safari, ios
SpiderMonkey: Firefox
Chakra: 옛날 버전 dege
모바일에서의 브라우저 엔진
안드로이드 - 브라우저마다 다른 엔진 사용
Chrome은 Blink 엔진
Firefox는 Gecko엔진
아이폰 - 애플정책으로 인한 Webkit
Chrome나 Firefox를 깔아도 안드로이드처럼 엔진을 바꿀 수 없고, Webkit위에 겉모습만 Chrome처럼 꾸민 것이다.
맥북에서 IOS safari에서는 깨지고, Chrome에서는 잘 동작하는 이유는 무엇일까요?
Safari는 Webkit엔진을 사용하고, Chrome는 Google Chrome를 사용하는데!
크롬에서는 잘 동작하나, 사파리에서는 깨지는 이슈들이 있었다.
이것은 바로 Webkit 버전 차이
Safari는 최신의 Webkit 버전을 사용하는 반면,
Chrome은 애플이 허용한 Webkit 버전만 사용이 가능하다!!
또한, 브라우저 기본 설정 차이
- Safari는 보안 및 개인정보 보호 기능 강력하여 쿠키가 일부 차단되거나, 스크립트 실행이 제한적인 반면
- Chrome은 더 유연한 정책으로 인해 잘 렌더링이 될 수 있다.
이렇게 브라우저 엔진에 대해서 매우 자세히 알아보았다.
부족한 점들도 있겠지만, 실무를 하면서 이론적인 내용이 중요하지 않을수도 있고, 기능 구현을 중점으로 하다보면 잊어버릴 수 있는데 이벤트루프 등 브라우저 엔진에 대해 자세히 공부할 수 있는 시간이 되었다.