프론트엔드 개발자라고 하려면 필수로 알아야 할 내용중 하나.
내가 작성한 코드가 페이지에 렌더링 되는 과정에 대해 알아야 한다.
이전에 올린 웹의 동작방식 포스팅에 이어서 브라우저 렌더링에 대해 알아보자.
렌더링이란, 개발자가 작성한 문서(html, css, javascript)를 브라우저에서
그래픽 형태로 출력하는 것을 말한다.
<Parsing>
DOM / CSSOM 생성HTML과 CSS파일은 단순한 텍스트로 되어있기 때문에
연산과 관리가 용이하도록 Object Model
로 만들게 된다.
DOM(Document Object Model)
생성CSSOM(CSS Object Model)
생성<Attachment>
Render tree 구축앞서 DOM/CSSOM이 생성되면, 이 둘을 이용하여 Render tree를 생성한다.
순수하게 텍스트로만 존재하던 이전단계와는 달리
Render tree에는 스타일 정보가 설정 되어있기에
실제 화면에 표시되는 노드들로만 구성되어있다.
📍
실제 화면에 표시되는 노드
란 무얼 뜻하는 것일까?
▶️ css 속성중에display: none
같은 경우에는
화면에 어떤 공간도 차지하지 않기 때문에 Render tree 생성 과정에서 제외된다.
▶️visibility: invisible
속성은 비슷해보이지만,
요소가 눈에 보이지 않을 뿐, 공간을 차지하기 때문에 Render tree에 포함된다.
<Layout>
Render tree 배치이 단계에서는 브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산한다.
이 단계에서 %, vh, vw
등 상대적인 위치나 크기의 속성은
실제 화면에 그려지는 px
단위로 계산되어 변환된다.
📍 뷰포트(Viewport)란?
웹페이지가 브라우저 화면 상에 실제로 표시되는 영역을 말한다.
기기마다 창의 크기가 다르기 때문에 뷰포트크기 또한 달라지게 된다.
따라서%, vh, vw
등 상대적인 단위를 사용하게 되면
뷰포트 크기가 달라질 때마다 계산을 다시 해야된다.
<Paint>
Render tree 그리기이전 Layout단계에서 계산이 완료된 요소들(px
)을 실제로 화면에 그리는 단계이다.
또한 이 단계에서 텍스트, 색상, 이미지, 그림자효과 등의 스타일요소들이 처리된다.
당연한 얘기겠지만,
스타일 요소가 복잡해질수록 paint 단계에서 소요되는 시간이 늘어나게 된다.
추가적으로 렌더링 최적화에 대해서 정리해보고자 한다.
위의 과정을 다 거쳐서 최종적으로 브라우저에 렌더링이 완료되었다고 해서
모든 작업이 한번에 다 끝났다고 할 수 없다.
어떤 이벤트나 액션에 따라서 html 요소의 크기나 위치가 바뀔 경우에
그에 영향을 받는 자식/부모노드들을 포함하여 Layout 단계를 다시 수행하게 된다.
이렇게 될 경우 영향을 받는 요소들의 크기, 위치를 다시 계산하게 되는데
이 과정을 Reflow
라고 한다.
Reflow
가 일어나는 대표적인 상황들은,
- 윈도우 resizing (viewport 크기 변경)
- 노드의 추가, 또는 제거
- 요소의 위치, 크기 변경 (left, margin, padding, border, width 등)
- 폰트 변경, 이미지의 크기 변경
렌더링 과정에서 말했듯이, Layout => Paint
순서로 렌더링이 일어나게 된다.
그렇기 때문에 Reflow
가 일어났다고 해서 바로 렌더링이 일어나지 않는다.
Render tree에 그려주는 Paint
과정이 있어야 하는데,
Paint
과정이 다시 일어나는 것을 Repaint
라고 한다.
Repaint
과정은 독립적으로도 일어날 수 있다.
레이아웃에 영향을 주지 않는 스타일 속성의 변경이 일어날 경우에는
Reflow
를 수행 할 필요가 없기 때문에, Repaint
만 수행하게 된다.
성능최적화를 위해 Reflow
와 Repaint
연산을 줄이는 방법들이 있지만,
내가 직접 좀 더 경험해보고 정리하고 싶어서
우선은 여기까지 정리!
📌 참고하였습니다 :)
수정해야 할 부분이 있으면 댓글로 알려주시면 감사하겠습니다!