Browser
😅 나는 본격적으로 공부를 하기 전에는 아니 공부를 하고 꽤 시간이 지나서도 browser에 대해 깊게 생각해보지 않았다.
그런데 javaScript로 웹프로그램을 만들 수 있는 이유가 브라우저에 js를 읽을 수 있는 엔진이 있다는 사실을 알고 달리 보게 되었다. 🤩
브라우저란?
web에서 페이지를 찾아서 보여주고 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램
Firefox, Google Chrome, Edge, Safari등이 있다.
이번 글은 이 브라우저가 유저가 접속한 페이지의 HTML/CSS 데이터를 어떻게 읽고 화면에 보여주는지 브라우저 렌더링 과정에 대해서 정리하려한다.
Browser Rendering Process
제일 보기 간단한 그림을 첨부했다. 이런걸로 공부해야 도망안가지...
위 그림을 풀어서 과정별로 나누면 다음과 같다.
1. Parsing
2. Style
3. Layout
4. Paint
5. Composite
1. Parsing
HTML과 CSS를 해석하는 단계이다. 사용자의 요청에 대한 응답으로 온 HTML/CSS 파일을 해석해서 Dom Tree 와 CSSom Tree를 구성한다.
2. Style
만든 dom tree와 css tree를 매칭시켜서 Render Tree를 만든다.
Render Tree는 dom tree와 cssom tree 중에서 실제 화면에 그려질 녀석들이다.
Dom tree와 cssom tree 그리고 render tree의 모습
ex) css style 요소 중 visibility : hidden 속성은 display : none 속성과 다르다. 전자는 화면에 보이지는 않지만 render tree에 속하고 후자는 속하지 않는다.
3. Layout
Render Tree에 있는 요소들을 어떻게 화면에 배치할지 각 노드들의 위치와 크기를 계산하는 단계이다.
이때 계산은 Render Tree의 root부터 노드를 순회하며 계산한다.
4. Paint
Layout 단계에서 계산한 값을 바탕으로 Render tree의 요소들을 화면에 배치한다. -> 만약 스타일을 복잡하게 했으면 여기서 오래걸린다.
5. Composite
Paint에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.
전체 과정은 다음과 같이 나타낼 수 있고 이를 Critical Rendering Path 라고 한다.
이 중 Dom, CSSom, Render tree를 형성하는 단계까지를 Construction 파트라고 하고
Layout, Paint, Composition을 Operation파트라고 한다.
이미지 출처
