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