브라우저는 어떻게 동작하는가?

브라우저 동작 원리에 대한 공부

https://d2.naver.com/helloworld/59361

 

브라우저의 기본 구조

1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
3. 렌더링 엔진 - 요청한 콘테츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기 - 자바스크립드 코드를 해석하고 실행.
7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 웹데이터 베이스가 정의되어 있다.

 

브라우저의 랜더링 과정에 대해서 상세하게 설명해보기

1. 브라우저 주소창에 www.naver.com 입력
2. 네이버 서버를 찾아간다.
3. DNS(실제 서버가 어디에 있는지 알고 있는 서버)가 연결해줄 곳을 찾음
4. 주소 앞에 https이라면 https 방식으로 통신
5. 서버의 기본 설정이 대부분 index.html 되어 있어 서버에서 이 파일을 클라인트로 전송
6. 브라우저는 텍스트로 이루어진 index.html 파일을 파싱
7. 한줄한줄 읽으면서 DOM트리를 만들어나감
8. CSS 파싱이 끝나면 중단된 html을 다시 읽고 DOM 트리를 완성
9. 완성된 DOM 트리와 CSSOM 트리를 합쳐 Render Tree를 만들고 그림
10. javascript는 중간에 HTML 파서는 Script 태그를 만나게 되면 javascript 코드를 실행하기 위해 파싱을 중단
11. 제어 권한을 자바스크립트 엔진에게 넘기고, 자바스트립트 코드 또는 파일 로드하여 파싱하고 실행함

https://sunnykim91.tistory.com/m/121