브라우저라고 하면 크롬, 사파리, 파이어 폭스 등을 말합니다.
우리가 웹 브라우저를 열고 웹 사이트에 접속하면 웹 브라우저 내부에서는 어떤 일이 벌어질까?
자세하게 알아가기 전에 간단하게 살펴봅시다.
사용자가 접속을 시도하면 웹 브라우저는 해당 호스트의 IP 주소를 DNS에게 요청합니다. 요청을 받은 DNS는 IP주소를 알려줍니다.
IP 주소를 받은 브라우저는 IP 주소에 있는 서버를 찾아갑니다.
이때 임의의 숫자를 적은 번호표(ISN)를 가지고 갑니다.
SYN 단계에서 브라우저가 가지고 있는 고유 번호인 ISN을 서버에게 줍니다.
SYN+ACK단계에서 서버가 가지고 있는 고유 번호를 브라우저에게 주면서 브라우저에게 받은 ISN을 +1하여 보내줍니다.
ACK단계에서 앞서 서버가 보내준 것들을 받고 서버의 ISN에 +1한 값인 승인 번호를 담아 서버에게 보내줍니다. 이 과정을 3-Way handshake라 하며 이 과정이 완료된 후 신뢰성이 구축되고 데이터 전송을 시작합니다. 참고로 TCP는 이 과정이 있기에 신뢰성이 있는 계층이라 하며 UDP는 이 과정이 없어 신뢰성 없는 계층이라고 합니다. 자세한 건 나중에 알아봅시다. 이 handshake 과정이 끝나면 브라우저는 서버에게 주소의 자료를 요청합니다. 브라우저가 서버에게 데이터를 요청하는 이것을 HTTP Request라 합니다. 서버는 데이터를 보내주게 되며 이것을 HTTP Response라 합니다. 웹 브라우저는 데이터를 받았으니 사용자가 이해할 수 있도록 보여주어야합니다. 먼저 데이터를 보여주기 위해 즉, 출력하기 위해선 서버로부터 받은 데이터를 해석해야 합니다. 웹 표준화 기구인 W3C(World wide web Consortium)의 명세에 따라 HTML과 CSS를 해석합니다. 이렇게 해석하는 것을 파싱(Parsing)이라고 합니다.
HTML을 파싱하면서 DOM Tree를 구성합니다. HTML을 파싱하는 도중에 CSS를 만나서 CSS Parsing이 진행됩니다. 잠깐! 렌더 트리를 구성하기 위해선 DOM트리와 CSSOM트리가 필요합니다. DOM트리는 파싱 중에 순차적으로 구성할 수 있지만 CSSOM트리는 CSS를 모두 해석해야 구성할 수 있습니다. 즉, CSSOM 트리가 구성되지 않으면 렌더링이 차단됩니다.
그래서 CSS는 렌더링 차단 리소스라 합니다. -> 렌더링이 차단되지 않도록 HTML문서 최상단(<head>)에 배치
CSSOM트리가 구성된 상태에선 이미 DOM트리가 다 그려지기 전에 렌더트리를 그리고 있습니다.
HTML을 파싱하던 중 script를 만나면 파싱을 멈추고(DOM 생성 중지), 자바스크립트 엔진에게 넘깁니다.
JavaScript의 파서 차단을 피하기 위해 async를 적용하여 비동기적으로 로드하거나 defer(지연 스크립트)를 이용하여 파싱을 막지 않게 할 수 있습니다. 여기선 자세하게 다루지 않겠습니다. 자바 스크립트 엔진은 추상 구문 Tree인 AST를 만들고 실행합니다. 중단했던 HTML Parsing을 마무리합니다.
Render Tree를 생성하는 과정까지를 Construction이라고 합니다. 그리고 렌더링 엔진은 Layout작업을 통해 렌더 트리의 정보를 가지고 노드들을 화면의 올바른 위치에 표시합니다. 그 다음 UI backend가 Render Tree의 노드들을 돌면서 UI를 그립니다. 그 다음 노드들의 레이어를 순서대로(우선순위대로) 구성하는 Composition 단계입니다.
Layout부터 Composition까지의 과정을 Operation이라고 합니다.
이러한 Parsing과 Layout, UI를 그리는 과정은 서버로부터 모든 데이터를 받고 나서 시작하지 않습니다.
브라우저는 사용자에게 빠르게 화면을 보여주기 위해 서버로부터 데이터의 일부분을 받아 화면에 표시하는 것을 반복합니다. 웹 페이지의 화면이 한번에 나타나지 않고 부분적으로 로드되는 것이 이러한 이유 때문입니다.
요약: 사용자가 브라우저로 웹 사이트 접속 -> DNS통해 서버의 IP주소 파악 -> 브라우저와 서버 간에 3-Way Handshake -> 브라우저가 서버에게 HTTP Request -> 서버가 브라우저에게 HTTP Response
-> DOM Tree일부 생성과 CSSOM Tree 완성 -> JS만나면 AST 생성 후 실행 -> DOM + CSSOM = Render Tree생성 -> Layout: Render Tree에 있는 Node배치 -> Painting: Node의 UI를 그림 -> Composition: Node를 순서대로 구성 -> 결과 화면 출력
지금까지 간락하게 설명한 내용인데 내용이 많네요... 자세한 내용을 다음번에 채우도록 하겠습니다
'기본 지식' 카테고리의 다른 글
| 프론트엔드 성능 최적화를 시작하기 전에 (1) | 2023.01.27 |
|---|---|
| 캐시(cache)와 쿠키(cookie) (0) | 2022.08.18 |
