안녕하세요! 물결웹팟 OB 박채연입니다. 😊
이번 주차 공유과제 주제로 '브라우저 렌더링 과정과 DOM'을 다루려고 하는데요!
저는 평소에 자바스크립트 코드를 작성하면서 하면서 우리가 작성하는 이런 파일들 화면에 어떻게 그려지고,
또 다양한 브라우저에서 동작하는지 개인적으로 궁금했던 부분이라
렌더링, DOM과 관련된 부분을 깊게 공부해보고자 해당 주제를 선정하게 되었습니다. 🔧
🏷️ 브라우저 렌더링 과정
우선, 브라우저 렌더링 흐름에 대해 살펴보겠습니다!
(1) 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.
(2) 그러면, 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSS 오브젝트 모델을 생성하고, 이를 결합해 렌더 트리를 생성합니다.
(3) 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱해 AST를 생성하고, 이를 바이트 코드로 변환하여 실행합니다. 이때, 자바스크립트는 DOM API를 통해 DOM이나 CSS 오브젝트 모델을 변경할 수 있고, 변경된 DOM과 CSS 오브젝트 모델은 다시 렌더 트리로 결합됩니다.
(4) 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고, 브라우저 화면에 HTML 요소를 페인팅합니다.
이게 전반적인 브라우저의 렌더링 과정인데요,
말이 정말 어렵고 복잡해 보이지만, 하나하나 상세하게 살펴보면 또 그렇게 어려운 흐름은 아니더라구요!
아래에서 하나 하나 더 자세하게 알아볼까요?
1️⃣ 요청과 응답
렌더링에 필요한 리소스는 모두 서버에 존재합니다.
여기에서 말하는 리소스는 html, css, 자바스크립트 파일이나 이미지, 폰트 등에 관련된 정보를 말합니다.
필요한 리소스를 서버에 요청하고, 서버가 응답한 리소스를 파싱해 렌더링하는 과정이 먼저 이루어집니다.
💬 HTTP
Hyper Text Transfer Protocol의 약자로, 웹에서 브라우저가 서버와 통신하기 위한 규약을 말합니다.
2️⃣ HTML 파싱과 DOM 생성
브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 텍스트 입니다.
이 텍스트를 시각적인 픽셀로 렌더링 하기 위해,
HTML 문서를 브라우저가 이해할 수 있는 자료구조, 즉 객체로 변환해 메모리로 저장해야 합니다.
문자열로 변환된 html 문서를 읽어들여서, 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해하고,
이 토큰을 객체로 변환해 노드를 생성한 후, 이 노드 간의 부자 관계를 반영해
모든 노드를 트리 자료구조로 구성하는 과정이 바로 Document Object Mode, DOM을 생성하기 위함입니다!
3️⃣ CSS 파싱과 CSSOM 생성
렌더링 엔진이 HTML 파일을 처음부터 한 줄씩 순차적으로 파싱하며 DOM을 생성하다가,
CSS를 로드하는 link 태그나 style 태그를 만나면, DOM 생성을 일시 중단 후, CSS 파싱 과정을 거치며 CSSOM을 생성합니다.
CSS 파싱이 완료되면, HTML 파싱이 중단된 지점부터 다시 HTML 파일을 파싱해 DOM을 이어서 생성하는 과정입니다.
4️⃣ 자바스크립트 파싱과 실행
CSS 파싱과 마찬가지로, 렌더링 엔진이 HTML 코드를 읽다가, script 태그를 만날 경우!
DOM 생성을 일시 중단하고, script 태그의 src 속성에 정의된 js 파일을 서버에 요청합니다.
또한, 이 코드를 파싱하기 위해, 자바스크립트 엔진에 제어권을 넘겨서,
이 엔진이 토크나이징, 파싱, 바이트 코드 생성 및 실행 등 복합적인 과정을 거쳐서 자바스크립트 코드를 실행합니다.
💬 직렬적 파싱
DOM과 CSSOM을 그리는 렌더링 엔진과, 자바스크립트 파일을 읽는 자바스크립트 엔진은
위에서 아래 방향으로 순차적으로 파싱하고 실행하는 '직렬적 파싱'을 합니다.
우리가 script 태그를 body 태그 하단에 두는 이유도 바로 이 파싱과 관련이 있는데요!
HTML 파싱을 하다가, style 태그를 만나면 HTML 파싱을 중단하고 CSS 파싱을 진행하구요,
그러다가 script 태그가 나오면 다시 중단하고 자바스크립트 엔진이 코드를 실행합니다.
HTML 파싱이 끝난 후 DOM이 생성되는데,
DOM이 생성되기 전 자바스크립트 파일에 DOM을 조작하는 코드가 있다면,
우리가 의도치 않은 결과가 발생할 수 있기 때문에 최대한 body 태그 하단에 위치하는 것이 좋다고 합니다!
자 이렇게 우리가 작성한 파일이 어떻게 브라우저에 렌더링 되는지 간략하게 알아봤습니다!
브라우저가 파싱하는 과정을 이해하다보니, <script> 태그를 body 태그 하단에 위치시키는 등
우리가 평소에 아무렇지 않게 작성하던 코드들이 다 의미가 있었음을 깨닫게 되어서 굉장히 신기했는데요!
또 작성한 코드가 브라우저에 표시되기까지, 눈에 보이진 않지만 많은 과정을 거쳐 렌더링 된다는 점이 흥미롭기도 했습니다. 😵💫
알면 알수록 신기한 것들 투성이인 웹 개발 세상 속에서 ,, 이렇게 하나 더 챙겨갑시다 🍚
'2주차' 카테고리의 다른 글
| 💥 브라우저 렌더링 과정에 대해 알아보자 ! (0) | 2024.10.29 |
|---|---|
| 성능 좋게 DOM을 조작해보자! (1) | 2024.10.29 |
| 자바스크립트 - 함수 호스팅, 화살표 함수 (0) | 2024.10.29 |
| 자바스크립트 reduce 메서드 알아보기 (0) | 2024.10.29 |
| 동적 필터링 구현 (0) | 2024.10.29 |
