[1] DNS

우리가 인터넷에 입력하는 도메인 주소는 사실 127.0.0.1과 같은 숫자로 구성된 ip주소 입니다.
도메인 주소를 ip주소로 변환하기 위해서 dns서버(구글은8.8.8.8)과 같은 서버에 요청을 보내고 입력한 도메인 주소를 ip주소로 변경해서 받을 수 있습니다.
도메인을 dns서버에 보내기전에 브라우저 캐시공간에 존재한다면 캐시에 도메인정보를 사용하게됩니다.
브라우저 캐시에도 없다면 운영체제 dns 캐시에서 검색을 합니다.
없다면 라우터 dns캐시에서 조회
dns서버에서 상위 도메인 .com .kr .net 등을 찾고 2차 도메인 google, naver 등을 찾고 3차로 m www 등을 찾는 방식으로 도메인주소를 찾아서 사용자에게 ip주소를 빈환한다.

[2] 통신

인터넷에서는 http, https통신을 함으로 3way-handshake를 사용한다

tcp syn
tcp syn ack
tcp ack

[] 브라우저의 이해

사용자 인터페이스 :

뒤로가기, 새로고침 등

브라우저 엔진 :

사용자 인터페이스와 렌더링 엔진 중개하는 역할

렌더링엔진

blink, gecko, webkit과 같은 엔진으로 html,css,js를 파싱해서 화면에 그려주는 역할을 합니다.

네트워크 레이어

프로토콜을 이용해사 외부의 리소스를 받아오고 서버에 요청을 보내는 계층

js 인터프리터

대표적으로 구글 v8엔진

UI 백엔드

alert과 같은 ui를 처리한다.

자료저장소

스토리지, 쿠키 등 로컬에 저장할 수 있는 데이터 공간

[] 렌더링

1. 서버에서 받아온 html은 파싱을 하여 dom트리로 만든다.
2. css를 파싱하여 스타일 규칙(cssom)을 만든다.
3. html dom 트리와 cssom트리를 더해서 렌더트리를 구축한다.
4. 렌더트리를 구축하고 화면에 어떻게 배치할지 계산을 한다.
5. 렌더링 작업을 하게된다.

[1] 파싱

• html코드의 어휘(일반글자)와 문법규칙(계산순서같은)인 문법들이 제대로 작성이 되었는지 확인하는 과정

[] html 파서

• html은 에러가 발생하면 최대한 복구하려고 한다

• 먼저 받아온 파일부터 파싱을 시작한다.

• script나 link태그를 만나게되면 html파싱을 중단하고 외부파일을 다운로드 한 후에 해석을 한다. 이유는 외부 파일을 분할해서 해석을 할 수가 없어서 한번에 해석을 하게되고 dom을 삽입할 수도 있어서 파싱을 중간하는 것이다.
  그래서 일부 브라우저에서는 예측 파싱을 이용해서 별도 스레드에서 외부스크립트나 스타일, 링크 등을 불러온다고한다

• dom을 렌더링하게 되면 처음부터 파싱해서 트리까지 만듬으로 시간이 오래 걸린다.

[2] css 파싱

• 파일을 모두 받아오기전까지 파싱을 할 수 없다.
  html파싱 도중에 파싱이 가능하다.

[] cssom 트리

• 스타일, 규칙, 선택자 등의 정보가 노드가 정보에 들어간다.

[3] 렌더 트리

• dom 트리와 cssom트리의 조합으로 만들어지며 보여줄 필요가 없는 head, script같은 태그나 display:none과 같은 스타일 속성을 가지고 있는 요소는 렌더트리에 그려지지 않는다.

• visibility: hidden 요소는 공간을 차지하고 보이지는 않지만 렌더트리에는 포함이 된다.

[4] Layout

• 렌더트리를 화면에 어떻게 배치할것인지 노드의 위치와 크기를 계산한다.

• 크기 값을 %로 지정하였다면 이 단게에서 픽셀단위로 변환을 한다.

[5] Paint

• Layout에서 계산된 픽셀을 여러개의 레이어로 관리한다.
• 단색 배경은 작업시간이 적지만 , 그림자 효과는 시간이 더 필요하다고 한다.

[6] Composite

• Paint 단계에서 생성된 레이어를 합성해서 실제화면에 보여준다.

[] 출처

출처1