브라우저 렌더링 과정

우리가 브라우저에서 주소창에 주소를 검색하면 페이지가 나타나게 된다

어떠한 과정을 거쳐서 이런 일이 일어나는지 한 번 알아보자

1. 주소창에 검색하기 (서버에 요청하기)

기본 페이지를 설정해놓지 않는 이상 브라우저를 띄우기만 해서는 아무런 페이지도 나타나지 않는다

브라우저를 띄우고 주소창에 검색하게 되면 해당하는 서버에 어떠한 요청을 보내게되고 요청을 받은 서버는 우리에게 응답을 돌려준다

이렇게 페이지를 나타내기 위한 html, css, js, 이미지 파일들을 응답으로 받아오게 된다

2. 해석하기 (파싱)

1번에서 받아온 파일 중 기둥이 되는 것이 두 가지가 있는데 바로 html과 css이다

html 파일을 의미있는 단위로 나누고 브라우저가 알아볼 수 있게 노드로 바꿔준 뒤 노드들 끼리의 관계도를 만드는데 이것을 DOM트리라고 부른다

페이지에 배치될 도형들과 텍스트를 가지고 있다 사람으로 비유하면 뼈 정도로 볼 수 있다

이제는 css를 html과 동일한 과정을 거쳐서 관계도를 만드는데 이건 CSSOM트리라고 부른다

사람에 비유하면 지방과 근육으로 볼 수 있다

3. 합치기 (렌더 트리 생성)

2번에서 브라우저가 알아볼 수 있게 만든 두 트리를 만들었는데 뼈와 살로 비유했었다 그럼 당연히 합쳐야겠지?

이 둘을 합치면 render-tree가 된다

이 렌더 트리를 토대로 브라우저에 그리게 되는데 이 트리는 브라우저에 그릴 수 있는 노드만 포함하고 있다

만약 렌더 트리를 만드는 과정에서 DOM에는 존재하는 노드이지만 CSSOM에 매칭되는 값이 display: none;이라면 해당 노드는 렌더 트리에 포함되지 않는다

단, visibility: hidden 속성은 없는 것이 아니라 보이지 않는 것이기 때문에 렌더 트리에 포함된다

4. 위치 계산하기 (Layout)

렌더 트리에는 해당 노드가 어느 위치에 어떠한 디자인으로 그려질지를 나타내는 정보들이 들어가있는데

이 값들은 상수로 이루어져있는 값일 뿐 내가 보고 있는 브라우저의 화면 크기에 대응하지 않는다

내가 보는 브라우저의 크기(ViewPort)에서 정확한 위치 값들을 계산해야하는데 이 과정을 Layout 과정이라고 부른다

단, 이 과정이 다시 발생하면 reflow라고 불린다

5. 그리기 (Paint)

Layout이 끝나면 브라우저가 paint 이벤트를 발생시키는데 말 그대로 렌더 트리를 화면에 픽셀로 변경해서 사용자가 볼 수 있게 그려주는 단계이다

이 단계를 paint 단계, 다시 발생하면 repaint라고 부른다