JavaScript 동작원리

자바스크립트의 동작 원리는 크게 두 가지로 나뉜다. 첫 번째는 파싱(Parsing) 단계이고, 두 번째는 실행(Execution) 단계이다.

파싱(Parsing) 단계

파싱 단계에서는 자바스크립트 엔진이 코드를 읽고 해석하여 문법적으로 올바른 구조로 변환한다. 이때, 실행 컨텍스트(Execution Context)가 생성된다. 실행 컨텍스트는 코드의 실행 환경을 담고 있는 객체로, 변수, 함수 선언 등의 정보를 저장하고 관리한다.

실행 단계

실행 단계에서는 파싱된 코드가 한 줄씩 실행된다. 이때, 실행 컨텍스트 스택(Execution Context Stack)이 사용된다. 스택은 후입선출(Last-In-First-Out) 구조로 동작하며, 현재 실행 중인 코드 블록에 대한 실행 컨텍스트가 스택의 가장 위에 위치한다.

브라우저의 렌더링 과정

렌더링 과정은 웹 페이지를 브라우저에 표시하는 과정을 말한다. 렌더링 엔진은 HTML, CSS, JavaScript 코드를 처리하여 화면에 그래픽을 그린다. 렌더링 과정은 크게 세 단계로 나뉜다.

1. 첫 번째는 DOM 트리 구축 단계이다.

HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. DOM 트리는 문서의 구조와 요소들을 표현하는 계층 구조이다.

2. 두 번째는 CSSOM 트리 구축 단계이다.

CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. CSSOM 트리는 요소들의 스타일 정보를 담고 있다.

3. 세 번째는 렌더 트리 생성 및 레이아웃 단계이다.

DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성하고, 각 요소의 위치와 크기를 계산하여 레이아웃을 수행한다.

마지막으로, 렌더 트리를 화면에 그리는 단계인 페인팅(Painting)이 이루어집니다. 레이아웃 단계에서 계산된 요소들의 위치와 스타일을 기반으로 실제 화면에 그래픽을 그린다.

정리

간단하게 JavaScript와 Browser의 동작원리, 렌더링 과정에 대해 알아보았다.
각 과정의 대략적인 흐름에 대해 정리한것이기 때문에 좀 더 자세하게 공부하기 위해서는 추가적인 구글링 필수이다.