스터디를 하는 도중 웹 브라우저의 동작 원리에 발표하며, 주소창에
사이트 주소를 검색했을때 웹 브라우저에서 동작 원리는 어떻게 되는가?에 대해 팀원들끼리 얘기가 나온적이 있었는데, 나도 처음부터 정리하며 원리 개념을 잡기 위해 정리를 한다!
사전 개념정리
인터넷 브라우저란?
웹 서버와 통신하여 인터넷 사이트 및 다양한 컨텐츠들을
볼 수 있도록 지원해주는 소프트웨어 프로그램!
현재 가장 사용되는 Chrome을 포함한 Safari, Firefox, 오페라 등이 있다.
DOM 트리란?
문서 객체 모델의 줄임말로, 객체로 표현된 HTML 문서이다.
브라우저는 HTML 문서를 바로 읽을 수 없기 때문에
이를 객체 형태로 바꾸어 읽을 수 있게 트리 구조로 변환해주어야 하는데
이것이 DOM 트리이다.
DOM 트리 내 하나의 객체는 노드라고 부르며, 4가지 노드로 구성되어있다.
1. 문서 노드 : 트리의 최상위 객체
2. 요소 노드 : HTML 요소 (태그)를 객체로 표현
3. 어트리뷰트 노드 : HTML 요소의 'Attribute'를 객체로 표현
4. 텍스트 노드 : HTML 요소의 '텍스트'를 객체로 표현
DOM 트리는 최상위 노드인 '문서 노드'에서 부터 아래 방향으로 순차적으로 탐색되며
JS를 통해 HTML 문서에 접근할 때 / 페이지를 조작하는 이벤트가 발생할 때 이 과정이 일어난다.
그리고 DOM 트리 생성과정에서 브라우저는 HTML 문서에 있는 에러들을 자동으로 처리해준다.
IP 주소
인터넷에 연결되어 있는 장치(컴퓨터, 스마트폰, 타블릿, 서버 등)들은
각각의 장치를 식별할 수 있는 주소를 갖고 있는데 이것을 ip라고 한다.
예)115.68.24.88, 192.168.0.1
-
IP 주소란 많은 컴퓨터들이 인터넷 상에서 서로를 인식하기 위해 지정받은 식별용 번호이다
-
현재 IPv4버전 (32bit)로 구성돼있으며, 한번씩 들어봤을 법한 127.0.0.1 같은 주소를 말한다
-
시간이 갈수록 IPv4 주소의 부족으로 IPv6가 생겼는데, 128비트로 구성돼있기 때문에 IP 주소가 부족하지 않다는 특징이 있다
도메인 네임(Domain Name)
ip는 사람이 이해하고 기억하기 어렵기 때문에, 이를 위해
각 ip에 이름을 부여할 수 있게 했는데, 이를 도메인이라고 한다.
즉, 네트워크상에서 컴퓨터를 식별하는 호스트명을 말한다.
-
IP 주소는 12자리의 숫자로 돼있어서 사람이 외우기 힘들다는 단점이 있다
-
도메인 네임은 'naver.com'처럼 몇 개의 의미있는 문자들, .의 조합으로 구성
-
도메인 네임은 사람의 편의성을 위해 만든 주소이며, 실제로는 컴퓨터가 이해할 수 있는 IP 주소로 변환하는 작업이 필요함
-
이때 사용할 수 있도록 미리 도메인 네임과 함께 해당하는 IP 주소값을 한 쌍으로 저장하고 있는 데이터베이스를
DNS라고 부른다. -
도메인 네임으로 입력하면 DNS를 이용해 컴퓨너는 IP 주소를 받아 찾아간다.
본론, Naver.com 치면 일어나는 일
3단계로 방식을 나눌 수 있다.
1. 주소창에 입력한 텍스트 정보 확인 ✔
대부분 인터넷 브라우저는 자사 주소창을 검색창과 동일하게 사용하고 있다.
대표적으로 가장 많이 사용되고 있는 Chrome은 주소창의 구글의 검색창으로 쓰고 있다.
브라우저는 사용자가 주소창에 어떤 텍스트를 입력했을 때,
이 텍스트가 검색어인지 URL인지 우선적으로 확인한다.
-
입력한 텍스트가 검색어이면 => 브라우저는 검색 엔진의 URL에 검색어를 포함한 주소로 페이지 이동
-
입력한 텍스트가 URL이면 => 브라우저 엔진에서 네트워크 호출을 수행
- 주소창에
naver.com을 입력한 경우엔 브라우저는 네트워크 호출을 수행하게 되는것이다
- 주소창에
2. 네트워크 호출 🗣
브라우저가 왜 네트워크 호출을 해야하는 걸까?
브라우저가 사용자에게 naver.com사이트를 화면에 보여주려면
네이버의 HTML, css, img, script 등 여러 데이터를 가지고 있어야 하는데
현재 브라우저엔 이러한 정보가 없다
(데이터들은 네이버 서버 컴퓨터에 존재함)
그러한 이유로 브라우저는 네이버 서버와의 네트워크 통신을 위해
여러 데이터들을 가져와야 하는데, 이 작업을 수행하기 위해선
브라우저는 우선 네이버 서버가 있는 컴퓨터의 IP 주소부터 파악할 필요가 있다.
(친구의 집에 찾아가려면 집 주소을 알야아 하는것과 유사)
요약하자면 🫥 🫥
- 네이버 서버 주소를 알기 위해 네임 서버(name server)와 통신
- 네임 서버 : 도메인과 IP를 연결 시켜주는 역할- 알아낸 주소를 네이버 서버와 통신하여 필요한 데이터 응답 받기
네이버 서버의 주소를 찾는 과정 🧐
네이버 서버 주소를 알기 위해 클라이언트(사용자 컴퓨터) 에서는
-
자신의 host 파일에서 도메인 네임에 대응하는 IP주소가 있는지 파악
-
없다면, 네임 서버에 '네이버의 IP 주소를 알려줘' 요청을 보냄
여기서 도메인 네임 이란? URL
www.naver.com에서naver.com을 해당한다.
인터넷은 컴퓨터 주소인 ip 주소를 기반으로 동작하는데
우리가 사용할 땐 사용하기 쉽도록 문자로 이루어진 도메인 네임을 사용한다.
따라서 도메인 네임을 ip 주소로 변환해 주는 환경인 DNS가 반드시 필요한데,
DNS를 운영하는 장치를 네임 서버 혹은 DNS 서버라고 한다.
네임서버는 도메인 주소에 대응한 IP주소를 찾아주는 역할을 하며
클라이언트는 일반적으로 네임 서버의 IP 주소를 갖고 있다.
따라서 클라이언트는 네임 서버와 통신이 가능하고,
naver.com에 해당하는 IP 주소를 요청 및 응답 받을 수 있다.
네이버 서버와 통신하여 필요한 데이터를 받는 과정 ♻️
클라이언트는 네이버 서버의 IP 주소를 알게 되어 네이버 서버와 통신할 수 있게 되었다.
클라이언트 브라우저는 네이버 서버에 데이터를 요청하는 HTTP Request를 보낸다.
요청을 받은 네이버 서버는 클라이언트가 요청한 문서를 찾아 읽고,
이를 바이트 형태로 텍스트 변환 후 클라이언트로 HTTP Reply (HTTP Responese)를 보낸다.
3. 렌더링 작업
브라우저 엔진은 네이버 서버로부터 응답받은 데이터에 바이러스가 있는지 검사한 후
데이터는 바이트 형태의 텍스트 문서이므로, 브라우저 엔진이 읽을 수 있다.
브라우저 엔진은 렌더링 엔진에게 해당 데이터를 해석하고,
웹 페이지를 화면에 띄울것을 요청한다.
요청 받은 렌더링 엔진은 받은 데이터를 바탕으로 렌더링 프로세스를 수행하고
이 과정이 끝나면 브라우저 엔진에게 작업 완료를 알린다.
그럼 마침내 화면에 네이버 페이지가 보여지게 되는것이다!
렌더링 프로세스가 뭐야?
렌더링 엔진은 브라우저 엔진으로부터 요청받은 내용을 화면에 표시해주는 역할을 한다.
웹 브라우저의 렌더링 과정을 Critical Rendering Path(CRP) 라고 하며
위 이미지와 같은 과정을 거쳐 그래픽 요소를 화면에 그리게 된다.
렌더링 과정은 4가지 과정으로 이루어진다.
- HTML 마크업을 처리하고 DOM 트리를 빌드합니다.
ParseHTML- Build DOM Tree
- CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.
ParseStylesheet- Build CSSOM Tree
- DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다.
- Calculate Style
- Build Render Tree (DOM + CSSOM)
- 렌더링 트리에서 레이아웃을 실행하여 각 노드의 형태를 계산합니다.
- Layout
- Update Layer Tree
- 개별 노드를 화면에 페인트합니다.
- Paint
- Raster
- Composit Layer
전체적인 렌더링 과정을 자세하게 알아보자 ‼️
Parse(파싱)
브라우저는 HTML, CSS 등 단순한 텍스트 문서를 이해하지 못한다.
이 문서를 브라우저가 이해할 수 있는 구조로 변환해주는 과정이 필요한데 이를Parse(파싱)이라고 한다.
Html 파싱 ➡️ DOM 트리 생성
Html 파싱 과정
-
서버에서 바이트 형태 문서를 응답받는다.
-
지정된 인코딩 방식(UTF-8)에 따라 문자열 변환
- 변환된 문자열을 토큰으로 분해한다.
- 토큰을 내용에 따라 객체(노드)로 변환
- 객체를 트리 구조 구성하여 DOM 생성
사용자의 만족도를 높이기 위해 렌더링 엔진은 HTML 문서가 모두 파싱될 때 까지 기다리지 않고 파싱 이후 과정인 배치와 그리기를 미리 진행한다.
Css 파싱 ➡️ CSSOM 트리 생성
HTML 파싱중 CSS 문서를 가져오는
Link태그를 만나면
DOM 생성이 잠시 중단되고 해당 CSS의 파싱 과정이 시작된다.
CSS 파싱 과정
- 서버에서 바이트 형태 문서를 응답받는다.
- 지정된 인코딩 방식(UTF-8)에 따라 문자열 변환 (
<meta charset="UTF-8">) - 변환된 문자열을 토큰으로 분해한다.
- 토큰을 내용에 따라 객체(노드)로 변환
- 객체를 트리 구조 구성하여 DOM 생성
CSS 파싱 과정은 HTML의 파싱 과정과 동일하다.
Javascript 파싱
HTML 파싱 과정 중 script 태그를 만나면 렌더링 엔진은 DOM 생성을 잠시 중지하고
서버에서 해당 JS 리소스를 브라우저 엔진으로부터 받아온다.
그리고 JS 엔진에게 제어권을 넘겨며, 받아온 JS 리소스를 파싱하여
AST(추상 구문 트리) 를 생성하고 이를 바이트 코드로 변환해 실행한다.
파싱이 종료되면 렌더링 엔진은 다시 제어권을 돌려받고 DOM 생성을 이어나간다.
만일 script 태그를 body 태그에 작성할 경우, HTML 파싱이 끝나지 않는 상태에서
JS로 인해 DOM이 조작되어 에러가 발생할 위험이 있다.
DOM이 조작되어 에러가 발생할 위험
- 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버린다.
➡️ 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 된다.- DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해진다.
➡️ 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없습니다.
따라서 script 태그는 반드시 body 태그 내부의 최하단에 위치해야 한다.
혹은 script 태그에 defer 속성을 부여하는 방법도 있다.
defer
브라우저는 defer 속성이 있는 스크립트를 '백그라운드’에서 다운로드 한다.
따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연 됩니다.
Render Tree 생성 🎄
HTML이나 CSS의 파싱 과정이 끝나면 각 결과물인
DOM 트리와 CSSOM 트리를 서로 결합하여 랜더 트리를 생성한다.
Render Tree 생성 과정
-
html태그와body태그를 처리하며 랜더 트리 루트를 구성 -
DOM의 최상위 노드부터 순회하며 화면에 보이지 않는 노드를 랜더 트리의 구성에서 제외
-
화면에 보여지는 나머지 노드에 CSSOM 규칙을 찾아 일치하는 스타일을 적용한다.
레이아웃 📄
랜더 트리 생성이 끝나면 전체 웹 페이지 화면 안에서
랜더 트리 내 각 노드의 위치, 크기를 계산하고
이를 화면에 배치하는 레이아웃 과정이 진행된다.
즉, 랜더 트리의 노드들을 화면에 배치하는 과정이다.
레이아웃은 전체의 배치과정이 필요한 글로벌 레이아웃, 일부 배치과정만 변경하는 로컬 레이아웃으로 나뉜다.
글로벌 레이아웃은 맨 처음 레이아웃이 발생할 때 초기 배치 이후 font와 같은 전역 스타일이 변경되거나 창이 리사이즈 될 때 발생한다.
초기 배치 이후 레이아웃 작업이 다시 일어나는것을 리플로우라고 한다.
로컬 레이아웃은 초기 배치 이후 일부 DOM 노드에 변경이 생기는 것처럼, 특정 부분만 재배치가 필요할때 발생한다.
일부 변경으로 전체 배치과정이 다시 일어나 불필요한 낭비가 발생하는 상황을 막아준다. 즉, 로컬 레이아웃이 일어나는 경우는 모두 리플로우가 발생할 때이다.
페인트 🖌
각 노드를 화면의 실제 픽셀로 변환해주는 작업을 의미한다. 픽셀로 변환하는 과정을 래스터화라고 부른다.
페인트 과정중 화면의 특정 위치에 여러 노드가 겹치는 경우 ➡️
여러 레이어를 만들고 합성하는 방식으로 작업이 이루어지며
페인트 과정이 끝나면 브라우저 화면에 네이버 페이지가 보이게 된다 😄😄
참고
