웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램!
우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말한다.
브라우저가 HTML파일을 해석하는 것을 파싱이라고 한다!
DOM !!!
Document Object Model의 약자이다.
번역하면 "문서 객체 모델"? 문서 객체가 뭐지?
문서 객체란 <html>
이나 <body>
같은 html문서의 태그들을 JavaScript의 객체(object) 로 만들면 그것을 "문서 객체"라고 한다!
즉 DOM은 문서 객체 모델, 그러니까 문서 객체의 집합이라고 볼 수 있다.
DOM
여기서 "트리 자료구조"를 이해할 필요가 있다!
트리의 각 데이터를 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/