당 포스팅은 유튜브 채널 Code ON 코드온 의 영상내용을 정리한 내용입니다.
출처: https://www.youtube.com/watch?v=hITJM_t1WWY
브라우저의 주요 기능
-사용자가 요청한 HTML페이지, PDF, 이미지 등을 서버에서 요청해 보여주는것입니다.
이것을 어떻게 보여주나면,
브라우저가 화면에 나타나는 요소를 렌더링 할때
파이어폭스 - 개코
사파리 - 웹킷
크롬 - 블링크
라는 각각의 렌더링 엔진을 사용합니다.
이 렌더링 엔진이 사용자가 선택한 콘텐츠를 표시해줌
예를 들어 HTML 페이지를 요청하면 HTML과 CSS를 파싱해서 화면에 표시해 주는 겁니다.
총 6단계의 과정을 거치는데요
DOM 트리 구축 -> CSSOM트리 구축 -> 자바스크립트 실행 -> 렌더링 트리 구축 -> 레이아웃 생성 -> 페인팅
이 순서대로 입니다. 하나하나씩 보시죠
잠깐! 파싱이란 ?
구문분석 이라는 뜻인데,
브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것을 말합니다.
변환된 결과는 '노드트리' , '돔트리' 로 표현됩니다.
1. DOM트리는
HTML 페이지를 구조화해서 계층으로 표현한 개념입니다.
최상단 루트태그인 <html> 태그로 시작해서 페이지에 대한 각 요소가 노드로 만들어 지죠
그래서 이런 HTML 문서가
이런 돔트리를 생성합니다.
2.CSSOM(CSS Object Model) 트리
그 다음엔 CSS 파일과 함께 스타일 요소도 파싱됩니다.
3. 자바스크립트 실행
이렇게 파싱을 하다가 HTML 중간에 <script> 태그를 만나게 되면 중단되는데요.
코드로 보면 <head> 태그 안에 <script> 태그가 있죠?
순서를 그림으로 살펴보면 이런 형태에요
그래서 상황에 따라 HTML 을 먼저 보여주기 위해 <body>태그 아래에 <script> 태그를 추가하는 경우도 있습니다.
혹은 'DOMContentLoaded' 같은 이벤트를 통해서 HTML 이 모두 로드된후에 스크립트를 실행하는 방법도 있습니다. (async, defer 를 좀 더 알아보면 좋음)
4. 렌더링 트리 구축
이렇게 파싱이 끝나면 화면에 출력될 내용을 나타내는 렌더링 트리가 만들어지고요
5. 레이아웃 생성
그다음에 뷰포트 크기에 맞게 레이아웃이 결정됩니다.
잠깐 ! 뷰포트란?
뷰포트란 디스플레이 상의 표시 영역을 의미하는데,
브라우저 디스플레이에 맞게 레이아웃이 결정된다는 겁니다.
6.페인팅
마지막 페인팅 단계에서는 눈에 보이는 내용을 픽셀로 변환해서 브라우저에 표시해 주는 것이죠. (Rem 같은 비율을 픽셀로 바꿔주는 과정)
최종 복습
DOM 트리 구축 -> CSSOM트리 구축 -> 자바스크립트 실행 -> 렌더링 트리 구축 -> 레이아웃 생성 -> 페인팅 순으로
6단계의 브라우저렌더링 과정을 거친 뒤 페이지를 볼 수 있게 됩니다.
'개발 일지 > JavaScript' 카테고리의 다른 글
| Parameter 와 Argument (0) | 2023.03.28 |
|---|---|
| 호이스팅 과 TDZ (0) | 2023.03.28 |
| REST API가 뭔가요 (0) | 2023.03.27 |
| JavaScript async/await (0) | 2022.12.20 |
| JavaScript Promise (0) | 2022.12.20 |
