브라우저의 구성요소
-
사용자 인터페이스 : 주소표시줄, 이전/다음버튼, 북마크메뉴등
-
브라우저엔진 :사용자 인터페이스와 렌더링엔진 사이의 동작을 제어
-
렌더링엔진 : 요청한 콘텐츠를 표시, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시
-
통신:HTTP 요청과 같은 네트워크호출에 사용됨, 이것은 플랫폼의 독립적인 인터페이스이고, 각플랫폼 하부에서 실행
-
UI백엔드:콤보박스와 창 같은 기본적인 장치를 그림, 플랫폼에서 명시하지 않은 일반적인 인터페이스, OS사용자 인터페이스 체계를 사용
-
자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행
-
자료저장소: 자료를 저장하는 계층, 쿠키를 저장ㅇ하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다, HTML5 명세에는 브라우저가 지원하는 웹데이터베이스가 정의되어있음.
그렇다면 주소창에 www.google.com을 쳤을 때 일어나는 과정을 살펴보자 🙋🏻♂️
1.먼저 브라우저가 캐싱된 DNS기록들에서 www.google.com에 대응되는 IP주소가 있는지 확인한다.
DNS란?
Domain Name System은 URL들의 이름과 IP주소를 저장하고 있는 데이터베이스.
인터넷에 있는 모든 URL들에는 고유한 IP주소가 있다.
이 IP주소를 통해서 해당 웹사이트를 호스팅하고 있는 서버컴퓨터에 접근을 할 수 있다. 결국 우리는 google.com을 호스팅하고 있는 IP주소를 찾아야한다.
브라우저캐시, OS캐시, router(DNS기록을 캐싱하고 있는)캐시, ISP캐시 의 순서대로 해당 IP주소가 있는지 확인하게 된다. (브라우저캐시에서 확인해서 없으면, os캐시에서 확인하고 ...)
ISP란?
간단하게 말해서, 인터넷망을 제공해주는 KT,SKT와 같은 업체를 말함, 이러한 ISP들은 DNS서버를 구축하고 있다.아무튼 캐시들에서 IP주소를 못찾으면, ISP의 DNS서버에 DNS요청을 보낸다.
그러면 ISP의 DNS서버(DNS recursor)가 다른 DNS서버(name server)에 연락하고, name server들 중에서 해당 URL에 매칭되는 IP 주소를 찾게 되면, DNS recursor로 전송한다.
2. IP주소를 얻게 되면 브라우저가 서버와 TCP connection을 한다.
브라우저가 올바른 IP주소를 얻게 되면, 브라우저는 인터넷 프로토콜을 사용해서 IP주소에 해당하는 서버와 연결이 된다.
3. 브라우저가 웹서버에 HTTP에 따른 요청을한다.
브라우저는 GET요청을 통해 서버에 www.google.com 의 웹페이지를 요청한다.
4. 서버는 요청을 처리하고 response를 생성하여 브라우저(클라이언트)로 전송한다.
5. 브라우저가 서버로부터 전달 받은 response를 가지고 렌더링한다.
6. 브라우저 렌더링
브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(사파리,크롬)이나 겟코(파이어폭스) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML,CSS,JS를 렌더링할 때 CRP(critical Rendering Path)라는 프로세스를 사용하여 아래의 단계로 이루어진다.
-
HTML 파싱 후,DOM(Document Object Model) 트리 구축
-
CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축
-
JS실행
- HTML중간에 스크립트가 있다면 HTML파싱이 중단되고, 스크립트를 실행
- JS는 각 JS엔진에 의해 처리되며 JS엔진은 script 태그 내의 JS코드와, src속성에 정의된 JS 파일을 로드하고 파싱하여 실행한다.
- JS실행이 완료되면, 다시 HTML파서로 제어권한을 넘기고, 브라우저가 중단된 시점부터 DOM트리를 생성
-
DOM과 CSSOM을 조합하여 렌더트리 구축 (display:none과 같은 보이지도 않고, 자리를 차지하지 않는 속성은 렌더트리로 구축되지 않는다. *visibility:hidden 은 보이지만 않고 자리는 차지하기에 렌더트리로 구축)
-
뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산(Layout/Reflow단계)
-
계산한 위치/ 크기를 기반으로 화면에 그림(Paint단계)
