Browser Rendering Process (브라우저 렌더링 원리)

 

💟 브라우저 렌더링이란? 

우리가 주소창에 https://www.google.com 또는 https://www.naver.com 등 다양한 URL을 검색하면 해당 웹페이지로 접속하는 것이 브라우저 렌더링 입니다. 

즉, 브라우저라는 것은 우리가 흔히 이용하는 웹페이지/웹사이트들이고, 실시간으로 웹 브라우저를 화면에 그려내는 과정을 렌더링이라고 합니다. 

 

 

💟 렌더링 엔진

대부분의 웹 브라우저들을 들여다보면 두 개의 엔진이 있는데, 하나는 렌더링 엔진으로 사용자가 보는 화면을 그려내는 역할을 하고, 하나는자바스크립트 엔진으로 자바스크립트 코드를 읽어서 기능을 작동시키는 역할을 합니다. 

이러한 렌더링 엔진들은 브라우저마다 다른데, 우리가 흔히 사용하는 크롬은 블링크 엔진을 사용합니다. 

 

렌더링 엔진은 웹 사이트의 소스 코드를 읽어서 실제 요소들이 어떤 크기, 어떤 너비들을 가지고 배치 되는지, 텍스트의 크기는 어느정도인지, 색상은 어떤색인지 등을 계산합니다.

 

💟 렌더링 과정

HTML과 CSS를 파싱하여 문서 객체모델 (DOM)과 CSS 객체 모델 (CSSOM)을 생성하고, 이를 결합하여 렌더 트리를 생성하게 됩니다. 렌더 트리는 브라우저 화면에 보여지지 않는 것들은 포함하지 않습니다. (HTML meta태그, CSS display:none등) 즉, 렌더 트리는 브라우저 화면에 렌더링 되는 노드만으로 구성됩니다.

이후 렌더 트리는 HTML 요소의 레이아웃(위치와 크기)을 계산하는데 사용되며,  최종적으로 실제로 화면에 표출하는 단계인 페인팅 처리에 입력 됩니다. 

 

 

 

💟 꼬리질문

🙋🏻‍♀️ 페인팅과 리페인팅의 차이점은 무엇인가요?

📝 페인팅은 웹 페이지의 요소들이 화면에 처음 그려지는 과정이며, 리페인팅은 이미 화면에 그려진 요소의 시각적인 변경이 필요한 경우 발생합니다. 예를들어, CSS 스타일이 변경되거나 요소의 내용이 동적으로 업데이트 되면, 해당요소를 다시 그리는 것이 리페인팅 입니다. 

---

🙋🏻‍♀️ HTML이 DOM을 파싱하는 과정에서 script 태그가 나타나면 어떻게 되나요?

📝 브라우저는 스크립트 태그를 만나면 이 코드를 바로 실행하지 않고, 렌더링을 일시 중단하고 스크립트가 실행될 때까지 기다립니다. 따라서 스크립트의 실행 시간이 오래 걸리면 웹페이지의 속도가 느려질수 있고, 때문에 성능을 향상시키기 위해 스크립트 페이지를 하단에 두거나 비동기적으로 로드하여 페이지의 렌더링을 지연시키지 않도록 조치합니다. 

---

🙋🏻‍♀️ 리액트의 렌더링 과정에 대해 설명해 주세요

📝 리액트는 가상DOM을 사용하여 렌더링을 최적화합니다. 가상 DOM은 실제 DOM의 가벼운 버전이며, 리액트 가상 DOM은 컴포넌트 기반으로 이루어집니다. 컴포넌트 상태가 변경되면, 리액트 가상 DOM이 이전 가상 DOM과 차이점을 비교하여 변경된 사항만 업데이트 합니다. 따라서 전체 페이지를 다시 그리는 일 없이 새로 변경된 부분만 렌더링이 됩니다. 

 

 

 

 

 

 

 

 

Reference 🐣

https://yozm.wishket.com/magazine/detail/646/

https://bbangson.tistory.com/87