[프론트엔드 면접 질문] - 브라우저는 어떻게 동작하는가

🚪 들어가며

브라우저의 렌더링 과정에 대해서 알아보자 ! 브라우저의 렌더링 과정은 복잡한 여러 단계를 거친다.

🪽 렌더링 과정

1. DOM 파싱: HTML을 파싱하여 DOM 트리(문서 객체 모델)를 생성
2. CSSOM 생성: CSS를 파싱하여 CSSOM 트리(스타일 규칙 트리)를 만듬
3. 렌더 트리 생성: DOM과 CSSOM을 결합하여 화면에 그릴 요소를 포함한 렌더 트리를 만듬
4. 레이아웃: 각 요소의 크기와 위치를 계산
5. 페인팅: 계산된 스타일과 위치에 따라 화면에 그림
6. 합성 단계: 복잡한 레이어를 관리하여 최적화된 화면 출력

---

📿 이벤트 루프

렌더링 과정은 HTML과 CSS를 기반으로 화면을 표시하는 데 집중하고, 이벤트 루프는 비동기 작업을 관리하여 사용자 인터랙션에 대한 반응성을 유지합니다. 이벤트 루프는 렌더링 과정의 수행과 별개로 작동하여, 콜 스택이 비어 있을 때 대기 중인 작업을 실행합니다.

자바스크립트의 런타임 환경은 주로 브라우저 또는 Node.js와 같은 자바스크립트 엔진에 의해 제공됩니다. 각 브라우저는 자신의 자바스크립트 엔진을 가지고 있으며, 이를 통해 자바스크립트 코드를 실행합니다. Node.js는 서버 측 자바스크립트 실행을 위한 런타임 환경으로, V8 엔진을 기반으로 하여 파일 시스템, 네트워킹 등의 기능을 제공합니다.

여기에는 브라우저의 엔진(예: V8, SpiderMonkey), 메모리 관리, 콜 스택, 이벤트 루프 및 API가 포함됩니다. 이 환경은 코드가 실행되고, 비동기 작업이 처리되며, DOM 및 CSSOM과 상호 작용할 수 있도록 지원합니다. 즉, 자바스크립트가 실제로 동작할 수 있는 기반을 제공합니다.

• 실행 컨텍스트는 자바스크립트에서 함수가 실행될 때 생성되는 환경으로, 해당 함수의 변수, 스코프, this 값 등을 포함합니다.
• 콜 스택(LIFO)은 현재 실행 중인 함수와 그 함수의 실행 컨텍스트를 추적하는 구조로, LIFO(Last In, First Out) 방식으로 작동합니다.

현재 실행 중인 함수가 쌓이며, 마지막에 호출된 함수가 가장 먼저 실행됩니다. 각 함수는 완료되면 스택에서 제거됩니다.

• 태스크 큐(FIFO)는 비동기 작업(예: setTimeout, Promises)의 콜백을 대기시키는 큐입니다. 이벤트 루프는 콜 스택이 비어 있을 때 태스크 큐에서 대기 중인 작업을 가져와 실행합니다.

비동기 작업이 완료되면 콜백 함수가 태스크 큐에 추가됩니다. 이후 콜 스택이 비어 있을 때, 태스크 큐의 첫 번째 작업이 콜 스택으로 이동하여 실행됩니다.

콜 스택
│
├─ main()  ──┐
│              │
│              ├─ functionA() ──┐
│              │                │
│              │                ├─ functionB() ──┐
│              │                │                  │
│              │                │                  ├─ functionC()
│              │                │                  │
│              │                │                  └─ ... (완료)
│              │                │
│              │                └─ ... (완료)
│              │
│              └─ ... (완료)
│
└─ 태스크 큐
   │
   ├─ setTimeout(() => { ... }) ──┐
   │                                 │
   ├─ Promise.resolve(() => { ... }) 
   │                                 │
   └─ ... (완료)

 

⛽️ 자바스크립트 엔진

자바스크립트 엔진은 코드 실행을 위해 CPU를 활용합니다. 엔진은 자바스크립트 코드를 해석하고, 이를 바이트코드로 변환한 후, CPU에 명령어를 전송하여 실제 연산을 수행합니다. 이 과정에서 엔진은 메모리 관리, 가비지 컬렉션 및 비동기 처리와 같은 다양한 작업을 관리하며, CPU의 연산 능력을 최대한 활용하여 빠르고 효율적으로 코드를 실행합니다. 이를 통해 사용자 인터페이스와 상호작용하며, 웹 애플리케이션의 동작을 가능하게 합니다.

자바스크립트 엔진은 RAM도 사용합니다. RAM은 프로그램 실행 중에 필요한 데이터와 객체를 저장하는 데 사용됩니다. 자바스크립트 코드가 실행될 때, 변수, 함수, 객체 및 배열 등의 정보가 RAM에 저장되어 CPU가 필요할 때 빠르게 접근할 수 있도록 합니다. 이 과정에서 RAM은 프로그램의 성능과 반응성을 높이는 데 중요한 역할을 합니다.

 

🚀 자바스크립트의 동작 과정

CPU가 처리하는 자바스크립트 코드의 계산

1. 산술 연산: 덧셈, 뺄셈, 곱셈, 나눗셈 등 기본적인 수학 연산을 수행합니다.
2. 조건문: if, switch 등의 조건문을 평가하여 코드 흐름을 결정합니다.
3. 반복문: for, while 등의 반복문을 사용하여 특정 작업을 반복 수행합니다.
4. 함수 호출: 함수를 호출하고 결과를 반환하여 프로그램의 구조를 관리합니다.
5. 비교 연산: 값의 비교를 통해 조건을 평가하고 실행 흐름을 제어합니다.

function calculateSum(a, b) {
    // CPU가 함수의 실행 컨텍스트를 생성
    return a + b;  // CPU가 덧셈 연산을 수행
}

// RAM에 매개변수 5와 10 저장 후 함수 호출
const result = calculateSum(5, 10); // CPU가 결과를 계산하고 RAM에 저장하여 CPU가 필요할 때 빠르게 접근할 수 있도록 합니다.

RAM에서 처리하는 역할

• 데이터 저장: 실행 중인 프로그램의 변수, 객체, 배열 등을 저장합니다. 이 정보는 CPU가 필요할 때 빠르게 접근할 수 있습니다.
• 작업 중간 결과: 연산 결과나 중간 데이터를 저장하여 CPU의 계산을 지원합니다.
• 가비지 컬렉션: 더 이상 사용되지 않는 메모리를 관리하여 RAM의 효율성을 높입니다.
• 속도 향상: RAM은 CPU와의 빠른 데이터 전송을 통해 프로그램의 성능을 향상시킵니다.

// RAM에 배열을 저장
let numbers = [1, 2, 3, 4, 5]; // 배열의 요소들이 RAM에 저장됨

// 배열의 길이를 RAM에서 조회하여 CPU가 길이를 계산
let length = numbers.length; // RAM에서 배열의 길이를 가져옴

// 배열에 새 요소 추가
numbers.push(6); // RAM에 6을 추가하여 배열을 업데이트

// 배열 요소를 반복 처리하여 결과를 생성
numbers.forEach((number) => {
    // 각 요소의 산술 연산(예: 곱하기)을 CPU가 수행하고, RAM에서 값을 가져옴
    console.log(number * 2); // RAM에서 값을 읽어와 CPU가 출력
});