브라우저에 특정 도메인(www.naver.com)을 입력하면?

대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저 렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 

 

대기열

브라우저는 주소창 입력에 대한 요청을 대기열에 넣습니다. 

 

캐싱

요청된 값의 결과값을 저장하고, 그 값을 다시 요청하면 저장해 둔 값을 다시 제공하는 기술.

다시 불러오지 않아도 되므로 속도 개선 효과가 있음.

 

공유 프록시 캐싱

요청한 서버에서 프록시서버가 캐싱을 하는 것을 의미한다.

ex) Node.js 서버의 경우 앞단의 프록시 서버로 nginx 서버를 둬서 이 서버를 캐싱 서버로 사용하는 경우

 

브라우저 캐시

쿠키, 로컬스토리지 등을 포함한 캐시이다. 브라우저 자체가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말한다.

 

DNS 조회

캐싱되어 있지 않은 경우는 DNS 조회부터 다시 시작하게 됨.

브라우저가 요청한 도메인의 IP 주소를 확인하는 단계이다.

DNS는 도메인 이름과 IP주소를 맵핑해주는 서버이다.

www.naver.com DNS 쿼리가 오면 [Root DNS] -> .com DNS -> .naver DNS -> .www DNS 를 거쳐 IP 주소를 맵핑함.

 

여기서, 바로 DNS 요청을 전달하는 것은 아니고 먼저 컴퓨터 메모리에 있는 호스트 파일 등 캐시를 확인한 후 캐시미스가 일어나면 DNS 서버로 IP 맵핑을 요청함

 

DNS의 장점

IP 주소가 바뀌더라도 사용자들은 똑같은 도메인을 사용할 수 있기 때문에, 사용성이 증가됨

 

라우팅

찾은 IP를 찾아가기 위해 라우팅을 거침. DNS에서 받은 IP주소를 기반으로 해당 목적지까지 라우팅 테이블과 서브네트워크를 거쳐 해당 IP주소를 찾아가게 된다.

서브네트워크와 라우팅을 건너뛰는 모습을 의미하는 홉바이홉(hop by hop) 통신이라고도 부른다.

시작 IP에서부터 라우팅 테이블을 통해 다음 IP로 계속해서 이동하는 라우팅 과정을 통해 최종 IP에 도달하는 통신을 의미한다.

 

라우팅 테이블

송신지에서 수신지까지 도달하기 위해 사용되며, 라우터에 들어가 있는 목적지 정보들과 그 목적지로 가기 위한 방법이 들어 있는 리스트를 의미합니다.

 

ARP (Address Resolution Protocol)

찾은 최종적인 IP를 ARP를 통해 물리적인 서버(MAC) 주소를 찾습니다.

 

초기 연결

브라우저가 TCP 3way-hand shaking 및 SSL 연결을 통해 연결을 설정합니다.

 

콘텐츠 다운로드

서버로부터 요청에 해당하는 응답을 수신한다.

 

❓ 브라우저 렌더링

1. 다운받은 콘텐츠(HTML, CSS)를 Object Model로 만든다.
   • DOM (Document Object Model) 생성: Html 파일을 기반으로 부모 노드와 자식 노드의 관계를 트리의 형태로 구축함
   • CSSOM (CSS Object Model) 생성: DOM + CSS -> CSSOM, DOM트리에 스타일 규칙이 적용됨
2. 렌더 트리 생성
   • DOM + CSSOM -> Render Tree, 브라우저에 표시될 요소들만 Render트리에 선별하여 표시함
   • 예를 들면, display:none 노드는 공간을 차지하지 않기 때문에 렌더 트리에서는 제외됨. 하지만 opacity:0 속성은 공간은 차지하지만 보이지 않게만 하기 때문에 렌터 트리에 포함됨
3. 렌더 트리는 레이아웃(Layout) 과정을 거치면서, 브라우저는 렌더 트리의 각 노드들에 좌표를 부여하고 정확히 어디에 어떻게 표시되는지를 결정한다.
4. 페인팅(Painting) 과정을 거치면서 각 노드들에 paint 함수를 호출하여 렌더링 된 요소들에 색상을 입히게 된다.
5. 우리가 확인할 수 있는 웹사이트를 확인하게 된다.

 

TTFB (Time To First Byte)
요청을 한 후 응답을 받는데 까지 걸리는 총 시간을 의미함.

최적화를 위해서는?
이미지 압축 기술 사용
CDN을 사용 (이미지나 다양한 자원들)
지연로드(이미지, 동영상)
JS 파일 분할
사용하지 않는 코드 제거
CSS 최적화...

 

참고 링크

아래의 유튜브 강의를 보고 정리한 포스팅입니다.

https://www.youtube.com/watch?v=5MM8NDzWHdE&t=505s 

 

브라우저 렌더링 참고 출처

• https://designer-ej.tistory.com/entry/Web-Rendering-DOMCSSOMRender-Tree