브라우저 동작 방식

1. 브라우저 구조

 

-사용자 인터페이스

-브라우저 엔진 : 인터페이스와 렌더링 인젠 사이 동작 제어

-렌더링 엔진 : 요청한 콘텐츠를 표시

-통신 : 네트워크 호출에 사용

-자바스크립트 해석기 : 자바스크립트 코드 해석 및 실행

-UI백엔드 : 캄보 박스와 창 같은 기본 장치를 그림

-자료 저장소 : 자료를 저장하는 계층(ex 쿠키)

*) 렌더링 : 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정.

 

 

 

 

2. 렌더링 엔진

-요청한 내용을 브라우저 화면에 표시하는 작업을 수행

-브라우저마다 다른 엔진 사용

-렌더링 과정 : HTML파싱(*파싱 : 읽어드린다.) -> 렌더 트리 구성 -> 렌더 트리 배치 -> 렌더 트리 그리기

 (렌더링 과정에서 HTML과 CSS파일을 DOM트리 형태로 구성)

 

1. HTML 파싱후, DOM트리 구축

2. CSS파싱 후, CSSOM트리 구축

3. Javascript 실행

4. DOM과 CSSOM을 조합하여 렌더 트리 구축

5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산

6. 계산한 위치/크기를 기반으로 화면에 그림

 

 

3. DOM 트리

 

 

 

 

4. DOM(Document Object Model)

-손쉽게 문서에 접근, 구조 및 콘텐츠 업데이트를 가능하게 하는 API

-DOM은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결한다.

 

 

 

출처 : https://www.youtube.com/watch?v=2k9ZG6PdGe4