먼저, 브라우저란 뭘까?
웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램!
우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말한다.
렌더링 동작과정을 살펴보기 전에, 용어 정리를 한번 해보자!
파싱(Parsing) 이란?
브라우저가 HTML파일을 해석하는 것을 파싱이라고 한다!
돔(DOM) 이란?
DOM !!!
Document Object Model의 약자이다.
번역하면 "문서 객체 모델"? 문서 객체가 뭐지?
문서 객체란 <html>이나 <body> 같은 html문서의 태그들을 JavaScript의 객체(object) 로 만들면 그것을 "문서 객체"라고 한다!
즉 DOM은 문서 객체 모델, 그러니까 문서 객체의 집합이라고 볼 수 있다.
DOM
DOM TREE란?
여기서 "트리 자료구조"를 이해할 필요가 있다!
트리의 각 데이터를 Node라고 한다.
트리 자료구조는 아래와 같이 생겼다. 이 글에서 자세히 다루면 너무 길어지니 구글에 트리 자료구조를 검색해 보거나, https://www.geeksforgeeks.org/introduction-to-tree-data-structure/ <- 요 자료를 참고해 보면 좋을 듯 하다.
그래서 브라우저 렌더링 동작은 어떻게 진행되는데..
먼저 브라우저는 HTML파일과 CSS파일을 각각 파싱을해서 각각의 Tree를 만든다. 이때 HTML은 DOM Tree, CSS는 CSSOM Tree가 된다.
다음으로 두 Tree를 결합하여 "Render Tree"를 구성한다.
그리고 Render Tree의 루트 노드로부터 시작해 각 노드를 순회하며 화면에서 보여질 각 노드의 위치와 크기를 계산한다.
이때 크기값을 %로 지정하였다면 그 값을 계산해 픽셀(px)단위로 변환한다.
화면 상의 실제 픽셀값으로 변환된 값은 여러개의 레이어로 관리된다.
마지막으로 레이어를 합성하여 실제 화면에 나타낸다! 사용자는 하면에서 웹 페이지를 볼 수 있다.
References
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
