웹 브라우저(Web Browser)?
웹에서 페이지를 검색하고 표시하며, 사용자가 인터넷상의 다양한 정보를 탐색하고 상호작용 할 수 있도록 도와주는 응용 프로그램이다.
웹 브라우저에서는 뼈대가 되는 HTML, 살을 붙여 꾸며주는 CSS, 동작을 수행하는 JS가 함께 실행된다.
내가 의도한 대로 코드를 실행시키기 위해 브라우저가 어떻게 렌더링되는지 파악해야 더 효율적인 코드를 작성할 수 있다.
1. 브라우저 렌더링 과정(Critical Rendering Path)
Critical Rendering Path(중요 렌더링 경로)?
브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 전환되는 일련의 단계를 말하며,
DOM(Document Object Model)과 CSSOM(CSS Object Model),Render Tree, Layout을 포함한다
1 - 1. DOM(Document Object Model)
문서 객체 모델이라고도 부르며, HTML, XML로 접근하기 위한 인터페이스이다.
웹 페이지를 스크립트나 프로그래밍 언어로 접근해 수정하는 역할을 한다.
DOM은 웹페이지를 객체 모델(트리 구조)로 표현한다.
: HTML의 바이트 코드를 문자로 변경 > 의미있는 토큰으로 변환 > 토큰을 노드로 전환 > 노드를 객체 모델로 형성
예시
1 - 2. CSSOM(CSS Object Model)
CSS 객체 모델이라고도 하며, HTML 대신 CSS가 대상인 DOM이다.
DOM과 같은 과정을 통해 트리 형태의 CSSOM이 만들어진다.
1 - 3. Render Tree
웹 페이지의 청사진 역할을 하는 단계로,
DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기 될 것만 선별되어 생성된다.
DOM 트리에서 표시될 노드 탐색 > 각 노드에 일치하는 CSSOM 규칙을 찾아 적용 > 콘텐츠와 계산된 스타일을 포함한 노드 내보냄
🚨스트립트 태그, 메타 태그 등 출력에 반영되지 않으므로 생략한다.
🚨display:none과 같이 CSS를 사용하여 숨겨진 요소도 생략한다.
1 - 4. Layout
요소의 배치를 잡는 작업을 하는 단계로,
Render Tree에서 정의된 위치 및 크기 관련 속성을 통해 각 노드들이 브라우저에서 렌더링 될 위치를 계산한다.
뷰포트 내에서 각 요소의 정확한 위치와 크기를 정하고, 상태적인 측정값을 화면에서 절대값으로 변환한다.
1 - 5. Paint
실제 화면에 그려내는 단계로,
레이아웃이나 위치를 변경하지 않고 색상이나 테두리 등 화면 요소의 시각적 모양을 업데이트 한다.
2. 화면이 업데이트 되는 과정
Javascript가 DOM을 수정하면 업데이트가 발생한다.
🚨이 과정에서 Layout을 다시 하는 것을 Reflow, Painting을 다시 하는 것을 Repaint라고 한다.
→ Reflow와 Repaint은 매우 오래 걸리는 과정이기 때문에 DOM을 수정하는 횟수가 많아지면 웹페이지의 성능이 저하된다.
예시
같은 결과라도 DOM에 몇 번 접근하냐에 따라 성능에 많은 차이가 난다.
그렇기 때문에 다양한 업데이트를 최적화 하여 접근 횟수를 최소화 해 성능을 개선할 방법을 항상 고민해야 한다.
출처
이정환 - 한 입 크기로 잘라먹는 리액트
구글 web.dev - : https://web.dev/critical-rendering-path-render-tree-construction/
Mdn web Docs -https://developer.mozilla.org/ko/