🕝 브라우저 엔진
브라우저 엔진은 HTML 문서와 기타 자원을 사용자의 장치에서 상호작용할 수 있는 시각적 표현으로 변환하는 역할을 한다. 대표적인 브라우저 엔진 3가지는 다음과 같다:
브라우저 엔진의 대표적 3가지
게코(Gecko): 모질라 재단에서 만든 브라우저 엔진으로, 파이어폭스가 이 엔진을 사용한다.웹킷(WebKit): KHTML에서 파생된 브라우저 엔진으로, 사파리가 이 엔진을 사용한다.블링크(Blink): WebKit에서 파생된 브라우저 엔진으로, 크롬과 오페라가 이 엔진을 사용한다.
📚 자바스크립트 엔진
JavaScript는 위에서 아래로 한 줄씩 해석하는 인터프리터 언어로, 브라우저에서 코드를 해석하고 실행하기 위해 자바스크립트 엔진이 필요하다. 대표적으로 구글 크롬의 V8 엔진이 있다.
힙메모리(Heap Memory)
힙 메모리는 동적으로 할당된 객체들이 저장되는 메모리 공간이다. 자바스크립트에서 힙 메모리는 프로그램 실행 중 필요에 따라 메모리가 할당되고 해제되는 비정형 데이터 저장소로, 주로 큰 객체나 동적으로 생성된 데이터가 저장된다. 힙은 콜 스택과 달리, 특정한 순서 없이 메모리를 관리하며, 가비지 컬렉션(Garbage Collection)에 의해 불필요한 메모리 공간이 자동으로 해제된다.
콜 스택(Call Stack)
JavaScript는 기본적으로 싱글 스레드 기반 언어로, 하나의 콜 스택을 가진다. 이는 한 번에 한 작업만 수행할 수 있으며, 실행된 작업이 어디에 있는지 추적하는 자료구조다. 콜 스택은 후입선출(LIFO) 방식의 자료구조로, 나중에 쌓인 자료가 먼저 처리된다.
개발자 도구의 CallStack 부분을 보면 함수가 호출되고 실행되는 순서와 스택에서 사라지는 과정을 확인할 수 있다.
스택오버플로(Stack Overflow)
무한 루프나 예상치 못한 수로 동일한 스택 프레임이 반복해서 쌓일 때, 콜 스택이 가득 차면서 스택 오버플로가 발생한다.
UI 백엔드
렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당한다.
브라우저 렌더링 과정
- 사용자가 브라우저로 웹사이트에 접속한다.
- 브라우저는 서버로부터
HTML,CSS,JavaScript같은 리소스를 다운로드한다. - 렌더링 엔진은 전달받은
HTML문서를 파싱해 DOM 트리를 만든다. - 다운로드한 외부
CSS파일과 포함된 스타일 요소를 파싱해CSSOM(CSS Object Model)트리를 생성한다. DOM트리와CSSOM트리를 결합해Render Tree를 구축한다.- 레이아웃 과정을 통해 각 요소의 배치를 결정한다.
- UI 백엔드는
Render Tree를 화면에 그리기 시작한다. 이 과정을 페인트(Paint)라고 한다.
🧑🏻💻 리플로우(Reflow) & 리페인트(Repaint)
브라우저 화면 크기를 조절하거나, 페이지 이동 등의 상황에서 요소의 크기가 바뀌면 렌더링 과정이 반복된다.
리플로우(Reflow): 레이아웃 과정을 반복하여 화면 요소의 배치를 다시 계산하는 과정.리페인트(Repaint): 요소의 시각적 변경을 반영하기 위해 페인트 과정을 다시 수행하는 것.
