혹시 여러분들은 브라우저 렌더링 과정에 대해서 아시나요??
저는 벌써 프론트엔드라는 분야를 공부한 지 이제 1년이 거의 다 됐는데 아직 브라우저가 어떻게 렌더링이 되고 ..
방식은 무엇이 있는지 정확히 잘 모르고 있어 이번 기회를 토대로 한번 알아볼까 합니다.
그러면!! 렌더링 과정을 알아보겠습니다.
브라우저가 뭘까?
쉽고 간단하게 설명을 하자면 브라우저는 웹을 탐색하고 표시하는 도구이다.
일반적으로 Chrome, Safari, Firefox, Internet Explorer 이런 것들이 있다. 브라우저는 user들이 선택한 자원을
서버에서부터 리소스를 받아와서 그것을 가지고 user들에게 실제로 화면을 렌더링 하여 보여주는 것이다.
브라우저의 렌더링 과정
브라우저의 렌더링 과정은 총 5단계를 이뤄져 있습니다.
Parsing - Style - Layout/Reflow - Painting - Composite
1. 먼저 사용자가 브라우저에 접속을 하게 된다.
2. 브라우저는 서버로부터 필요한 HTML, CSS, JavaScript와 같이 웹 사이트에 필요한 리소스를 다운로드한다.
3. HTML은 DOM TREE CSS는 CSSOM TREE를 결합하여 Render TREE를 형성한다. (각 파일을 파싱함)
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만들어 각 요소를 배치할지 결정한다.
5. 레이어를 합성시켜 실제 화면에 나타낸다.
➡️ 정석적인 면접 답변
Parsing
브라우저가 페이지를 렌더링을 하기 위해서는 HTML 파일을 먼저 해석을 해야 하는데 이때 HTML 파일을 파싱 하여서
DOM(Document Object Model) Tree를 구성하는 단계이다. 이 단계에서 CSS 파일이 존재하면 CSS 파일도 파싱을
하게 되는데 CSSOM(CSS Object Model) Tree를 구성을 한다.
Style
다음은 스타일이다. 스타일 단계에서는 위에 HTML로 파싱을 한 DOM Tree와 CSS 파일로 파싱 한 CSSOM Tree를
결합시켜서 Render Tree를 구성하는 단계이다. 이 Render Tree로 인하여 화면에 그려지게 되는 Tree이다.
다만, Render Tree를 구성할 때 visibility : hidden은 요소가 공간을 차지하고 안 보이는 것이지만 display : none은
Render Tree에서 제외가 된다는 것을 명심하자!!
Layout
이번에는 Layout 단계이다. 레이아웃 여러분도 많은 들어봤을 것 같은 단어이다. 단어 그대로인 레이아웃이다.
어디에 어떻게 위치를 구성할 것인지를 이야기하는 것이다. Render Tree를 어떻게 구성을 할 것인지 그 노드의
정확한 위치와 크기를 계산하는 단계이다.
Paint
Paint 단계에서는 레이아웃에서 계산된 값을 이용하여서 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환하는
역할을 해준다. 픽셀로 변환된 결과는 하나의 레이어가 아닌 여러 개의 레이어로 관리되는 것을 반드시 잊지 말자.
Composite
마지막. Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타내는 것이다.
➡️ 마지막으로 모르거나 면접에서 들어오는 꼬리 질문 단어를 정리해볼까 한다.
webInteraction : 정적인 화면이 아닌 움직임이 있는 화면이나 액션
reflow : webinteraction을 통한 렌더링 과정의 레이아웃의 반복 수행
paint : 레이아웃의 과정이 끝나면 UI 백엔드에서 Render Tree를 화면에 그리는 것
repaint : paint를 반복적으로 수행
layout : 각 요소를 어디에 배치할지 결정
parsing : 하나의 프로그램을 런타임 환경으로 실제로 실행할 수 있는 내부 포맷을 분석하고 변환하는 것
DOM : 웹 페이지를 이루는 태그들을 js가 이용할 수 있게 브라우저가 트리구조 만든 객체 모델
CSSOM : CSS 내용을 파싱 하여 자료를 구조화한 것
Render Tree : 웹 페이지에 나타낼 요소들의 layout을 계산하는 데 사용되며,
픽셀을 화면에 렌더링 하는 paint 즉!! 화면에 요소들을 표현하는 프로세스를 위해서 존재
기본적으로 이러한 단어들의 개념은 전반적으로 알고 있으면 좋겠습니다!!
느낀 점
사실 웹 브라우저에 어떤 것이 있는지도 잘 몰랐고 브라우저가 어떻게 렌더링이 되는지 그러한 과정도 잘 몰랐는데 ..
이번 블로그를 작성하면서 어떻게 웹 브라우저가 렌더링이 되고 어떤 방법으로 실행이 되는데 알게 되어서 좋았다. 하지만
조금 더 자세하고 깊게 들어가면 더 이해하기 어려운 내용이 등장하고 개념들도 나올 것 같은데 조금 더 자세히 알아보고
내용을 더 추가하면 좋을 것 같다. 또 추가적으로 브라우저 엔진에 대해서 조사를 하려고 한다!!
'SW' 카테고리의 다른 글
| 그냥 함수? 화살표 함수? 뭐가 다를까 (0) | 2024.04.23 |
|---|---|
| I'm 동시성과 병렬성 그리고 비동기와 동기 master 🔨 (0) | 2024.03.31 |
| 좋은 코드란 무엇일까? (0) | 2024.03.19 |
| Hi, I am DOM(Document Object Model) 🐟입니다. (1) | 2024.02.03 |
| TDD에 대해서 알고 있어? (0) | 2024.01.16 |
