브라우저 렌더링 과정, 자바스크립트(JS) 작동 원리

✌ 흠..

우리가 컴퓨터를 하면서 가장 많이 이용하는것은 무엇일까? 나는 당연히 브라우저라고 생각한다. 인터넷이라는 개념 자체가 작게는 우리 지역 사람들, 크게는 전세계의 사람들과의 소통의 길을 열어준다는 의미를 담고있다. 여기서 브라우저는 이 길의 입구를 담당해주고 있기 때문에 불가피하게 클릭 횟수가 다른 서비스에 비해 많을 수 밖에 없다고 생각한다.

그래서 오늘은 이러한 브라우저의 내부를 한번 살펴볼려고 한다.

 

브라우저는 렌더링이라는 과정을 거치면서 컴퓨터 내부의 복잡한 사정을 우리 눈에 보이게 해준다. 이 렌더링 과정을 한번 5가지로 나눠보았다.

 

⛳ First, Receive

우리가 브라우저에 URL을 입력하면 DNS를 통해 해당 도메인이 IP 주소로 변환되어 해당 IP로 웹과 관련된 정보를 요청한다. HTML의 형식을 가진 정보는 바이트 형식으로 전달받아 문자열로 변환된다.

 

여기사 DNS는 쉽게 말해 도메인을 네트워크 주소로 변환해주는 역할을 한다. 이 주제는 다음에 따로 다루도록 하겠다.

 

⛳ Second, Create DOM

이렇게 문자열로 변환된 HTML은 각각 토큰(Token)으로 구분된다. 토큰으로 분해된 HTML은 각각 노드 객체로 나눠지면서 노드 객체간의 부모-자식 관계를 형성해 트리 형태의 자료구조 DOM(Document Object Model)를 형성한다.

 

 

HTML의 속성(Attribute)중 style과 link라는 것이 있다. 만약 HTML 파싱중 이러한 속성을 마주치게 된다면 로킹(Blocking)이 되어 CSSOM 생성으로 넘아가게 한다. 또한 만약 script 태그를 만난다면 다시 블로킹되어 JS로 넘어가게 된다.

 

블로킹(Blocking)?
블로킹이란 다른 작업이 끝날때 까지 작업 진행을 보류하는 것을 말함.

⛳ Third, Create CSSOM

CSS도 HTML과 파싱 과정이 거의 똑같다고 할 수 있다. 바이트 형식으로 데이터를 전달받고, 문자열로 변환하고 토큰으로 구분하여 노드로 나눠 트리 형식의 CSSOM을 형성한다.

 

⛳ Fourth, Create Render Tree

현재 DOM과 CSSOM이 전부 형성된 상태이다. 이 두 트리 형식의 자료구조는 서로 독립된 상태로 존재하고 있는데, 우리가 브라우저에서 웹을 구현하기 위해서는 이것들을 합쳐줄 필요가 있다. 이 과정을 할 때 사용하는 것이 렌더 트리(Render Tree)이다.

 

 

렌더 트리는 렌더링에 필요한 트리 자료 구조이다. 주로 HTML 요소의 레이아웃 계산과 페인팅 처리에 이용되고, JS에 의해 노드가 추가되면 다시 페인팅 하는 리페인팅이 일어난다.

 

⛳ Fifth, Create AST

웹에는 HTML과 CSS만 존재하는 것이 아니다. 움직이지 못하는 웹에 다리를 달아주는 JS 또한 존재한다. 우리가 만약 JS로 코드를 짜고 이것을 실행한다면 추상 구문 트리, 즉 AST(Abstract Syntax Tree)를 형성하게 된다.

 

AST는 JS코드를 각각 의미를 갖는 토큰으로 분해하고, 각 토큰으로 서로 결합하여 부모 자식 관계를 만들어 만들어진다. 이렇게 만들어진 AST를 바탕으로 JS 엔진은 바이트코드로 변환시켜준다.

JS는 메모리 힙과 호출 스택으로 구성되어있다.

 

데이터를 저장하는 메모리 힙(Memory Heap)은 변수, 함수, 함수 실행 등의 메모리의 공간을 할당해준다.

 

작업 순서를 지정해주는 호출 스택(Call Stack)도 존재한다. 호출 스택은 메모리 힙에서 할당한 작업들을 실제로 사용을 할 수 있게 도와준다. 만약 누군가 정의해둔 함수를 우리가 실행한다면 메모리 힙에서 저장해놓은 정보들로 함수 단위로 하나씩 쌓아가면서 가장 나중에 올라온 데이터를 먼저 수행한다(FILO). 이때 수행된 명령어들은 하나씩 사라지게 된다.

자바스크립트는 기본적으로 싱글 쓰레드 언어이다. 하나의 일을 하고 있다면 다른 일은 병행하지 못한다는 것이다. 그래서 WEB API, Callback Queue, Event loop를 이용해 비동기로 사용할 수 있게 해준다.

 

✊ WEB API

 Ajax 요청, setTimeout(), 클릭 이벤트와 같은 콜백 함수, 키보드 이벤트 등의 이벤트 헨들러와 같은 웹 브라우저에서 제공하는 기능들을 말한다.

여기서 콜백 함수(Callback Function)는 함수 한개가 실행되고, 그 다음으로 바로 실행되는 함수를 말한다. 예를 들어 다음과 같은 코드가 있다고 과정하자.

setTimeout(function () {
  console.log("Hello World");
}, 1000);

setTimeout 이라는 콜백 함수에 "Hello World" 를 출력하는 또 다른 함수가 있다. setTimeout은 몇초만큼 대기라는 의미를 가지고 있는데, 해당 명령어에서는 1초라고 표현되어있는데, 만약 1초가 지났다면 "Hello World" 를 출력해라 라고 Call을 하는 것이다.

 

✊ 콜백 큐(Callback Queue), Event Loop

콜백 큐는 콜백 함수들이나 이벤트 헨들러가 보관되는 곳이고,

 

Event Loop는 호출 스택에 현재 명렁어가 있는지 확인하고, 콜백 큐에 대기 중인 콜백 함수나 이벤트 헨들러가 있는지 확인한다. 만약 호출 스택이 비어있고, 콜백 큐에 함수가 존재한다면, 이벤트 루프는 FIFO(First Input First Out) 형식으로 콜백 큐에 대기중인 함수들을 호출 함수로 불러낸다.

 

function A(){
  console.log("A");
}
function B(){
  console.log("A");
}

A();

setTimeout(function () {
  console.log("Hello World");
}, 1000);

B();

다음과 같은 코드가 있다 과정하고, 실행 순서를 분석해본다면
1. 함수 A가 호출 스택으로 이동함
2. 함수 A 안에 있는 console.log("A"); 가 호출 스택으로 이동함
3. A가 출력되고, 호출 스택에서 사라짐
4. 함수 A가 호출 스택에서 사라짐

여기까지가 A가 호출되는 과정이다. 이후 A가 호출되고 난 후를 살펴보면

5. setTimeout은 비동기 함수, 즉 콜백 함수이기 때문에 Web API로 빠짐
6. 함수 B도 A와 같은 방식으로 실행이됨
7. 1초가 지나면 WEB API에서 처리중이였던 setTimeout이 콜백 큐로 빠지게 됨
8. 만약 호출 스택이 비어있다면 콜백 큐에 있던 setTimeout이 호출 스택으로 이동함
9. setTimeout 안에 있는 console.log("Hello World"); 가 호출 스택으로 이동함
10. Hello World가 출력되고, 호출 스택에서 사라짐
11. 함수 setTimeout이 호출 스택에서 사라짐
12. 더 이상 실행할 함수가 없으므로 프로그램이 종료됨

 

이 프로그램에 콘솔 창을 확인하면

A
B
Hello World

이러한 결과를 출력해준다.