사용자 동작을 나열하며 간략히 공부해보자.
>>> 사용자 동작 시작
1. https://okayoon.tistory.com/ 를 검색한다.
2. DNS(Domain Name System)에서 주소를 검색, 해당 ip 주소를 찾아서 사용자가 입력한 URL과 함께 전달한다.
- 이때 캐싱된 DNS 기록이 있는지 먼저 확인한다.
3. 전달받은 ip 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트의 리소스를 요청하고 해상 웹 서버는 리소스를 전달한다.
>>>> 전달받은 리소스를 통해 브라우저 렌더링 과정 시작
4. DOM Tree 구축을 위해 HTML을 파싱한다.
- DOM Tree는 문서 객체 모델로 모든 요소, 속성, 텍스트 등 (문서노드, 요소노드, 속성노드, 텍스트노드)을 트리 구조로 표현한 것.
- 중간에 외부 스타일 로드를 만나게되면 DOM Tree 생성을 중단하고 CSS 파싱을 시작한다.
- Style Sheets를 통해 CSSOM Tree를 생성한다.
- CSSOM Tree는 스타일 노드들을 트리 구조로 표현한 것.
5. Render Tree 생성
- DOM Tree와 CSSOM Tree를 통해 Render Tree를 생성한다.
- Render Tree는 최종적으로 실제 브라우저에 표현되어야하는 노드들로만 구성하여 트리 구조로 표현한 것.
(ex: <head> 태그나 display: none;와 같이 브라우저에 그려지지 않는 것들은 포함되지 않는다.)
- 만약 과정 중에 JS 코드를 만나게 된다면 JS 파싱을 위해 렌더링이 잠시 중단되고, JS 파싱이 끝난 후 재개된다.)
6. Layout (레이아웃)
- Render Tree와 viewport를 통해 노드들의 화면상 위치와 크기를 계산한다.
(ex: 1em -> 16px)
7. Paint (그리기)
- Layout 단계에서 계산한 레이아웃을 각 레이어에 px 단위로 그린다. (이 단계에서 Layer 생성)
- Layout에 포함안된 속성들도 그린다. (ex: 색상, 그림자효과 등)
- Update Layer Tree: 렌더링에 사용될 최종 레이어들을 계산하여 생성하며 생성조건은 root object, css filter, position, transform, overflow, canvas, video....
- 사용자 경험을 위해 렌더링 엔진은 모든 파싱을 기다리지 않고 동시에 일부를 그리기 시작한다.
8. Composite (합성)
- Update Layer Tree에서 생성한 레이어들을 합성하여 한장의 비트맵으로 만들어 실제 화면에 나타낸다.
- 별도의 합성 스레드를 두어 합성 과정만 별도로 분리해서 진행한다.
Q. 만약 Re-rendering이 될 경우에는?
Reflow (리플로우)
- Layout 단계의 변화가 있을때 발생한다.
- Layout 계산부터 다시한다 (Layout -> Paint -> Composite)
Repaint (리페인트)
- Paint 단계의 변화가 있을때 발생한다.
- 재 결합된 Render Tree를 기반으로 다시 그린다.
- Repaint는 Reflow가 발생하지 않고도 발생할 수 있다. (Paint -> Composite)
Q. <scrpt> 태그를 만나서 HTML 파싱이 중단되는 문제를 해결할 수는 없나?
script 태그에 async와 defer 속성을 사용할 수 있다. (둘 다 사용 시 우선순위는 async)
- async: 비동기
- defer: html 파싱이 끝나고 진행하는 속성
더 깊은 내용에 대해 알고 싶거나, 참고한 글을 확인하고 싶다면!
https://d2.naver.com/helloworld/59361
http://taligarsiel.com/Projects/howbrowserswork1.htm
'~2022 > FE-개발 개념' 카테고리의 다른 글
| 04. 호이스팅(Hoisting)에 대해 간단히 설명해주세요 (0) | 2022.09.11 |
|---|---|
| 03. 실행 컨텍스트(Execution Context)에 대해 설명해주세요. (0) | 2022.09.11 |
| 01. 브라우저 구조에 대해 간략히 설명해주세요. (0) | 2022.09.07 |
| URI? URL? 같은거 아니었어? 엥 URN은 또 뭐야? (0) | 2021.08.30 |
| 사용자 인증? 토큰? JWT(Json Web Token)란 뭘까? (0) | 2021.08.25 |
| [크롬 확장 프로그램 제작] 셋팅 방법 (0) | 2021.06.17 |
| 즉시 실행 함수(IIFE, Immediately-invoked function expression) (0) | 2021.05.03 |
| Redux-Saga란? (0) | 2021.05.03 |