[JavaScript] 브라우저 렌더링 원리

🫸브라우저 렌더링 원리에 대해 알기 전에

☝️ 브라우저란(browser)? 

인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용  프로그램이다. 

우리는 필요한 정보를 얻기 위해서 구글이나 네이버에 접속한다. 해당 사이트에 접속하기 위해 사용하는 도구를

'브라우저'라고 한다.  

 

✌️렌더링(Rendering)이란

서버로부터 HTML, CSS, JavaScript로 작성된 파일을 받아 브라우저에 시각적으로 출력하는 것을 말한다.

 

 

👩‍🎨브라우저 렌더링 과정의 대략적인 그림

사용자가 원하는 URL을 입력하면 아래 과정으로 렌더링을 진행한다. 

client가 서버에 주소를 보내면 sever에서는 해당 HTML 파일로 응답을 한다. CSS 파일과  JS파일도 마찬가지로 client에서 파일 요청이 이루어질 경우 요청에 맞게 파일을 보낸다. 

 

 

 

🤷‍♂️렌더링 순서

렌더링의 순서는 크게 Construction과 Operation의 단계로 나뉘어진다.

 

1. 불러오기

Loader가 서버로부터 전달받은 리소스 스트림을 읽는다. 

 

2. HTML 파싱과 DOM 생성

1. 서버는 HTML을 메모리에 저장한 후에 바이트로 응답한다.
2. 바이트를 문자열로 변환한 후, 토근 단위로 분해한다. 
3. 분해된 토큰들을 객체로 변환하여 노트를 생성한다.
4. 이러한 노드들은 트리자료구조로 구성하며, 이 자료구조가 'DOM'이다. (모든 노드들은 중첩관계에 의해 트리구조로 구성)

3. CSSOM 생성

1. 렌더링 엔진은 처음부터 한 줄씩 파싱을 진행하며 DOM을 생성한다.
2.  DOM을 생성하다가 CSS를 로드하는 태그를 만나게 되면 DOM 생성을 일시 중단한 후, CSSOM 생성을 진행한다. 
3. 이러한 방식을 반복하며, CSSOM을 생성한다. 

4. 렌더트리로 결합

 - 렌더링을 위해 DOM과 CSSOM은 렌더트리로 결합된다.

 - 렌더 트리를 토대로 그려질 노드와 스타일, 크기를 계산한다. 

 

여기까지가 construction 단계이다. 아래는 Operation 단계이다. 

 

 

5. 그리기 

렌더트리의 각 노드를 실제 픽셀로 변환 후 실제 그리는 작업을 실행한다. 상황에 따라 리렌더링이 이루어진다. 

 

 

🔧리렌더링

리렌더링은 특정 상황 발생 시 리플로우와 리페인트가 이루어진다. 

• 리플로우 : 레이아웃 계산을 다시 하는 것
• 리페인트 : 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 

1. 자바스크립트에 의한 노드 추가 또는 삭제
2. 브라우저의 리사이징에 의한 뷰포트 크기 변경
3. HTML 요소의 레이아웃에 변경을 발생시키는 스타일 변경