[Interview] 브라우저 렌더링 과정이 어떻게 되나요?

[Interview] 브라우저 렌더링 과정이 어떻게 되나요?

브라우저 렌더링 과정이 어떻게 되나요?

◆ 실제로 답한다면 ...

먼저 HTML, CSS를 기반으로 DOM, CSSOM Tree를 생성합니다.

DOM, CSSOM Tree가 생성되면 이 2개를 기반으로 Render Tree를 생성합니다.

이때 Render Tree는 화면에 보여질 내용만 포함하기 때문에 display: none, meta tag와 같이 화면에 보이지 않는 것들은 포함하지 않습니다.

Render Tree가 생성되면 Layout을 합니다. Reflow라고도 부르는 과정입니다.

Viewport에 맞게 화면에 배치를 합니다. 이때 %, em, rem과 같은 상대 단위는 모두 px 단위로 변경이 됩니다.

Layout 과정이 완료되면 paint 과정이 일어납니다. 실제 화면에 그림을 그리는 과정입니다.

이 결과들은 layer 화 되어 관리되고 이후 합성 과정을 거쳐 사용자에게 보여집니다.

 

위와 같이 사용자에게 보여지는 화면은 특정 이벤트를 통해 다시 그려지는 경우가 있습니다.

예를들어 크기가 변경되면 다시 viewport에 맞게 재계산을 해야하기 때문에 reflow 과정부터 repaint, 합성 과정을 거치게 됩니다.

그러나 그림자, 색상 변경과 같이 계산할 필요가 없는 값을 변경하면 repaint, 합성 과정을 거치게 됩니다.

마지막으로 transform과 같이 합성 과정만 거치는 경우도 있습니다.

 

위와 같이 어떠한 과정을 거쳐 화면에 보여지는 지 알게되면 렌더링 최적화를 할 수 있습니다.

예를들어 애니메이션을 구현한다고 할 때, left, top 과 같은 값을 변경하는 것보단 transform을 이용하면 더 빠르게 렌더링을 할 수 있습니다.

 

◆ display: none, visibility: hidden 의 차이점이 무엇일까요? (꼬리 질문 1)

(만약 위에서 display: none을 언급하지 않았다면)

Q. [1] display: none의 경우 화면에 보이지 않고, visibility: hidden의 경우 보이지 않지만 영역은 차지 하고 있습니다.

Q. [2] display: none의 경우 화면에 보이지 않기 때문에 render tree에 포함되지 않습니다.

그러나 visibility: hidden의 경우 영역을 차지 하고 있기 때문에 render tree에 포함됩니다.

 

위 질문에 대해 답변할 때, 2번 답변이 조금 더 높은 점수를 얻을 수 있을 것 같습니다.

 

추가 궁금증을 위한 검색 keyword

• 브라우저 렌더링 과정
• reflow
• repaint

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.