[Web] 브라우저의 동작 원리

 

 

 

브라우저 구조

 

사용자인터페이스 

뒤로가기 앞으로가기 새로고침 등등

 

렌더링 엔진

사용자인터페이스를 제외한 body부분

 

브라우저 엔진

사용자가 뒤로가기 버튼을 눌렀을때, 그 뒤로가기를 인식해서 다시 렌더링해주게 알려주는 

사용자 인터페이스와 렌더링 엔진 사이에 가교 역할을 하는 것이 브라우저 엔진

 

통신

웹브라우저의 네트워크를 담당하는 부분

개발자 툴 > 네트워크 탭에서 활동을 볼 수 있다.

 

자바스크립트해석기

브라우저는 자바스크립트해석기로 자바스크립트를 이해할수있다.

 

UI 백엔드

사용자 입력, 마우스 움직임, 클릭등을 핸들링 하는 곳

 

자료저장소

브라우저도 정보를 저장할 수 있음.(로컬스토리지, 세션스토리지)

 

---

 

 

렌더링 엔진 동작 과정

 

 

1. naver.com을 검색했을때, 실제로 브라우저는 naver.com이라는 도메인을 이해할 수 없다. ip를 찾아야한다.

2. 도메인을가지고 DNS(Domain Name System)에 찾아간다.  naver.com 의 ip주소가 192.10.6.3 인 것을 찾아온다.

3. 받은 ip를 DNS cache에 저장하고 그 주소로 방문을 시도한다.

4. 방문하면 요청한 html 파일을 받는다. 그파일의 형태는 바이트스트링으로 전달받게 된다.

5. 이 바이트스트링을 인코딩을 하게된다. (가장 보편적인 UTF-8 Encoding)

html상단에 인코딩 utf-8을 meta태그에 설정

 

6. 토큰화 - 말그대로 한글자 한글자 읽는다. 

6번 - 토큰화 : 문자 하나하나 읽는다.

 

7. 노드 - 토큰을 의미있는 단위로 재해석을 해야한다. token을 Object로 만든다.

8.  html은 수직관계가 분명하므로, 이제 각각 태그들에게 관계를 설정해줘야한다

이것들을 model이라고 하는데, 합쳐서 Document Object Model = DOM 이라고 한다.

이 노드에 관계를 주면 DOM Tree라는 결과물이 나온다.

9. CSS읽기 : style link태그를 만나는 순간 html은 ip주소로 css파일 요청을 보낸다.

 

네트워크 탭을 보면 html이 처음 불러오고 css가 불러와지는 것을 확인할수있다.

css 읽는 또한 마찬가지로 '바이트스트림 > 캐릭터화 > 토큰화 > 노드 > CSSOM tree' 과정을 겪는다

 

10. 자바스크립트 읽기 :자바스크립트 또한 html은 ip주소로 js파일 요청을 보낸다.

11. 자바스크립트가 실행되는 동안에는 DOM 파싱을 멈춘다.

자바스크립트는 html에 안쓰고도 자바스크립트만으로도 노드를 만들수있으므로

DOM을 그리던 것을 잠깐 멈추고 자바스크립트 내용을 읽게 된다.

script태그가 먼저나와있어 DOM을 읽는것을 멈춰놓은 상태라 에러가 발생했다.

그래서 보통 작업을 할 때 script태그를 바닥에 두는것이다.

자바스크립트가 DOM 의 생성을 막지않는 옵션도 있다 (defer, async)

 

*그렇다면 css는 왜 항상 상단에 있는 것일까?

css는 DOM 의 생성을 막지않는다. dom이 완성이되었다고 바로 웹사이트가 완성되지않는다.

DOM  은 CSSOM 을 기다린다. DOM  과 CSSOM 이 둘다 완성이 되어야 다음 스텝으로 진행할수있다.

그러므로 CSSOM 을 빨리만드는 것이 웹사이트 성능에 중요한 역할을 한다.

css파일 크다면 DOM 은 오랫동안 기다리게된다.

현재 페이지에서 필요한 css만 들고오는것이 중요하므로 미디어쿼리를 사용할수있다.

모바일일때는 모바일로바뀌었을때만, 데스크탑일때는 데스크탑일때만 가져오도록 설정할수있다.

 

12. 이제 위 내용들을 합쳐 Render Tree를 만들게된다. 

DOM과 CSSOM을 합친 RenderTree

RenderTree는 화면에 그려야하는 것만 가지고,

화면에서 보이지않는 것들은 제외한다 (html태그, meta태그, display:none 요소 등)

 

13.이제 최종설계도인 RenderTree가 있으므로 그리기만 하면된다.

layout을 잡고 - 여러개의 레이어를 paint하고  - 합쳐서 완성하게된다.

(Layout - Paint - Composite 과정) 이구간은 웹사이트를 사용하면서 계속 반복되는 구간이다.

이것이 반복이 되는 순간(Reflow) 은 아래와 같다

-페이지 초기 렌더링시 (최초 Layout과정)

-윈도우 리사이징 시 (Viewport 크기 변경시)

-노드 추가 또는 제거

-요소의 위치, 크기 변경(left,top,marigin,padding,border.wirdth,height...등)

-폰트변경(텍스트 내용)과 이미지 크기 변경(크기가 다른 이미지로 변경 시)

 

웹사이트 성능이 좋게 하려면

1. 소스의 사이즈줄이기 (바이트 수 줄이기)

2. 외부에서 가져오는 리소스양 줄이기 (미디어쿼리, 불필요한 파일 나중에)

3. 외부에서 가져오는 횟수 줄이기 (인라인)

4. Reflow, Repaint 줄이기 (left right 보단 transition을 1px 씩보단 3px씩 등...)

Reflow는 DOM 요소의 크기와 위치를 다시 계산하는 과정입니다.
Repaint는 DOM 요소의 컨텐츠를 다시 그리는 과정입니다.
두 과정 모두 브라우저의 렌더링 성능에 영향을 미치므로, 최적화를 통해 성능을 개선할 수 있습니다.
CSS에서 Reflow와 Repaint를 유발하는 요소는 다음과 같습니다.

Reflow
DOM 노드의 추가 또는 제거
DOM 노드의 위치 또는 크기 변경 (width, height, margin, border 등)
Window 창 크기 조절 (위치 또는 크기 값이 상대 값일 경우)CSS 애니메이션계산된 CSS 정보 (offset, scrollTop 등)폰트 변경이미지 크기 변경

Repaint
CSS 속성 변경 (color, background-color, visibility 등)CSS 애니메이션이미지 변경

 

 

 

출처 : 코딩알려주는누나

https://www.youtube.com/watch?v=Mqh13dNI8jc&t=185s