공부한 내용을 정리한 글입니다
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋
브라우저의 주요 역할은 웹페이지 렌더링이다
브라우저의 주요 역할은 사용자가 요청한 웹페이지를 렌더링하는 것이다.
브라우저는 서버로부터 필요한 리소스(HTML, CSS, JS, 이미지, 폰트 등의 정적 파일 또는 서버에서 동적으로 생성한 데이터)를 요청하고 이를 응답받아 브라우저에 시각적으로 렌더링한다.
이 과정을 좀 더 상세하게 나타낸 것이 아래의 도식이다. 하나씩 살펴보도록 하자.
사용자가 주소창에 원하는 URL을 입력하고 엔터 키를 누르면,
입력한 URL의 호스트 이름이 DNS(Domain Name System)를 통해 해당 서버의 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에 요청이 전송된다.
일반적으로 루트 요청인 경우(예: https://google.com), 서버는 index.html을 응답하도록 설정되어 있다.
따라서 https://google.com과 https://google.com/index.html은 동일한 요청으로 처리된다.
네트워크 탭을 보면 내가 요청한 index.html외에 수많은 CSS, JS, 이미지 파일 등이 함께 응답된 것을 볼 수 있다. 브라우저 렌더링 엔진이 HTML 파싱 중에 *외부 리소스를 로드하는 요소를 만나면 해당 리소스 파일을 서버로 별도의 요청을 보내기 때문이다.
*외부 리소스를 로드하는 요소
- link (CSS 로드)
- script (JS 로드)
- img (이미지 로드)
브라우저, 서버 간의 통신 규약 = HTTP
브라우저, 서버는 통신할 때 HTTP(HyperText Transfer Protocol) 라는 통신규약을 사용한다.
그 중 1.1, 2.0 버전을 간략히 살펴보면 아래와 같다.
HTTP 1.1
하나의 커넥션에 하나의 요청과 응답만 처리된다.
HTML 문서에 포함된 이미지, link, script 태그에 의한 각각의 요청이 개별적으로 전송되므로 응답 시간이 요청하는 리소스의 개수에 비례하며 증가한다.
HTTP 2.0
하나의 커넥션에 여러 개의 요청과 응답이 처리될 수 있어 HTTP1.1에 비해 페이지 로드 속도가 약 50% 정도 빠르게 개선된다.
문자열을 브라우저가 이해가능한 자료구조로 변환하는 HTML 파싱과 DOM 생성
HTML은 문자로 이루어진 순수 텍스트기 때문에 아래 과정을 통해 브라우저가 이해할 수 있는 자료구조로 변환 후 메모리에 저장한다.
- 브라우저가 HTML을 요청하면 서버는 요청한 HTML을 읽어들여 메모리에 저장한다. 그리고 이 저장된 바이트(2진수)를 인터넷을 경유해 브라우저로 응답한다.
- 브라우저는 바이트 형태로 응답된 HTML을 지정된 인코딩 방식(ex. utf-8)에 따라 문자열로 변환한다.
- 변환된 문자열을 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해한다.
- 각 토큰을 객체로 변환해 노드를 생성한다.
- HTML 요소들의 중첩 관계를 고려해 모든 노드들을 트리 자료구조로 구성한다. 이렇게 생성된 트리 자료구조를 DOM(Document Object Model)이라 부른다.
스타일 정보를 해석해 계산된 스타일 객체 모델을 생성하는 CSS 파싱과 CSSOM 생성
body {
font-size: 32px;
}
ul {
list-style-type: none;
}
CSSOM은 CSS의 상속을 반영해 생성된다. 상위 요소에 적용된 속성은 하위 태그에도 상속이 되는 것이다.
HTML의 문서 정보 + 스타일 정보 = 렌더 트리
렌더 트리는 말 그대로 브라우저에 렌더링할 요소를 트리구조로 나타낸 것이기 때문에, <meta>, <script> 태그 등과 CSS에 의해 숨겨진 노드(ex. display: none)는 렌더 트리에 포함되지 않는다.
렌더트리는 이후 레이아웃을 잡고 페인팅하는 과정을 거치는데, 이 때 다음과 같은 변경이 일어나면 위 두 과정이 반복적으로 일어난다.
- JS에 의한 노드 추가/삭제
- 브라우저 창 리사이징
- HTML 요소의 레이아웃에 영향을 주는 스타일 변경
- 노드의 위치, 크기가 변경되는 경우
- width/height, margin, padding, border, display, position, top/right/bottom/left 등
그러나 리플로우와 리페인트는 반드시 순차적으로 실행되지는 않기 때문에 리플로우를 최소화하고 리페인트만 실행하는 최적화가 가능하다.
script 태그를 만나면 제어권이 렌더링 엔진에서 JS 엔진으로 넘어간다
브라우저는 script 태그를 만나면 제어권을 렌더링 엔진에서 JS엔진으로 넘긴다.
JS엔진은 렌더링 엔진이 HTML을 파싱해 DOM을 만들 듯 JS코드 파싱해 CPU가 이해할 수 있는 AST(추상적 구문 트리)를 생성하고 이를 인터프리터가 실행할 수 있는 바이트코드를 생성해 코드를 실행한다. JS엔진의 실행이 완료되면 렌더링 엔진이 다시 제어권을 받아 HTML 파싱을 중단된 지점부터 재개하고 DOM을 생성한다.
이 때 모든 JS 엔진은 ECMAScript 사양을 준수한다.
참고
[도서] 자바스크립트 딥다이브
'개발일지' 카테고리의 다른 글
| 서브도메인에 gtag로 심은 이벤트가 추적되지 않을 때 (0) | 2023.11.12 |
|---|---|
| [Yarn Berry] yarn berry 프로젝트에서 자꾸만 node_modules가 나타나는 이유 (with. Vite) (0) | 2023.10.03 |
| [Yarn Berry] 배포 이슈_ Cannot find type definition file for 'vite/client'. (0) | 2023.10.03 |
| Cube.js를 이용한 실시간 데이터 시각화 과정에서 발생한 이슈와 해결 (0) | 2023.09.24 |
| S3, CloudFront, Route53 CI/CD를 위한 GitHub Actions 워크플로우 구성 (0) | 2023.09.14 |
댓글