Web과 브라우저 동작원리

WEB

클라이언트

• 요청자, 유저, 손님

서버

• 정보제공자, 백엔드

• 클라이언트가 요청(request)하면 서버는 응답(response)을 해준다.

---

HTML(Hyper Text Markup Language)

• 웹페이지 구성 요소들의 구조
  • 기본 구조를 만들 수 있음
• 서버한테 html을 달라고 요청을 함

CSS(Cascading Style Sheets)

• 웹 페이지 구성 요소들을 꾸밈

JAVASCRIPT

• 웹 페이지 구성 요소들에게 동적임 움직임 추가

---

브라우저 동작원리

1. HTML Parsing => DOM Tree 생성

1. 브라우저에 사이트 주소를 입력

2. 서버는 브러우저에 바이트 스트림(8비트의 데이터 형태)으로 형태로 응답해줌 전달받음

3. 브라우저는 이걸 받고 인코딩함(바이트를 문자로 바꿈)

4. 인코딩방법은 UTF-8 헤드부분에 넣음

5. 토큰화를 하게 되면 오브젝트화시킴(토큰화를 통해 노드 생성). => 이거를 node라고 함

   • 토큰: 태크 속성과 속성 값 등 약속된 여러가지 값들

6. 그리고 각각의 노드들을 연결시켜 관계를 설정시킴. 그리고 이 전체적인 것을 DOM 이라고 한다.

node : DOM Tree를 구성하는 하나의 단위
Model: 각각의 node들을 연결시켜 관계를 설정

DOM TREE를 만드는 것이 html의 목표

• DOM은 항상 CSSOM을 기다림
• DOM을 생성할 때 script파일을 만나게 되면 브라우저는 돔 생성을 중단하고 script안에 있는 자바스크립트 코드를 해석함

2. CSS Parsing => CSSOM 생성

DOM이 생성되는 방식과 거의 흡사하다.

1. 바이트 스트림으로 받게 된다.
2. 토큰화
3. 노드 설정
4. CSSOM tree 생성

CSS는 DOM의 생성을 막지 않음

3. Render Tree 생성

• DOM Tree + CSSOM Tree === Render Tree

4. Layout

• 앞서 만들어진 DOM과 계산된 스타일을 따라가면서 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 만듬

• 렌더 트리의 각 노드가 화면의 정확한 위치와 크기를 계산한다.

5. Paint

• 레이아웃단계가 끝나면 페인트 단계가 실행는데 앞서 만들어진 랜더트리를 따라서 페인트 기록이 생성한다.
• 기록에는 랜더링 순서, 지금까지 정보를 여러개의 레이어로 나눈 다음 시각적인 부분을 그림

6. Composite

마지막으로 composite단계에서는 앞서 페인트단계에서 만든 레이어를 스크린에 픽셀로 만들고
나누어져있던 레이어를 합치게 된다.

리플로우 리페인트
css속성이 바뀌면 브라우저는 랜더트리를 다시 만듬
항상 리플로우가 실행되진 않는다 리플로우단계를 건너뛰고 페인트로 넘걸수도 있다.
모두 다 건너뜀 ex) transform, opacity gpu가 관여할수 있음

• html을 통해서 DOM 생성 + css를 통해서 CSSOM을 생성 => Render Tree 생성
• Layout( 값들을 측정하는 단계) , paint(측정한 값들을 그린다), composite(여러개의 레이아웃들을 합치는 단계)