JavaScript - 브라우저의 동작 원리

브라우저의 기본 구조

 

1. 사용자 인터페이스 

• 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.

2. 브라우저 엔진

• 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
• 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 한다.

3. 렌더링 엔진

• 요청한 콘텐츠를 표시.
• 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
• 파이어폭스는 게코(Gecko)엔진을 사용하고, 사파리와 크롬은 웹킷(Webkit)엔진을 사용한다.

4. 통신

• HTTP 요청과 같은 네트워크 호출에 사용됨.
• 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.

5. UI 백엔드

• 콤보 박스와 창 같은 기본적인 장치를 그림.
• 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

6. 자바스크립트 해석기

• 자바스크립트 코드를 해석하고 실행.

7. 자료 저장소

• 자료를 저장하는 계층.
• 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.
• HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

---

브라우저 동작 과정

통신과정

1. 사용자 입력

• 사용자가 주소 표시줄에 URL을 입력하거나, 링크를 클릭하거나, 검색어를 입력하는 등의 입력을 받는다.

2. URL 해석

• 입력받은 URL을 해석하고 해당 웹 페이지의 서버로 요청을 보낸다.
• URL에서는 프로토콜(일반적으로 HTTP 또는 HTTPS), 호스트명(웹 서버의 주소), 포트 번호, 경로 등의 정보를 추출.

3. DNS 조회

• 호스트명을 IP 주소로 변환하기 위해 DNS(Domain Name System) 서버에 조회를 요청한다.
• DNS는 호스트명을 해당 호스트의 IP 주소로 매핑해 주는 역할.

4. 서버 연결

• 웹 서버에 연결을 시도한다.
• 이때, HTTP 또는 HTTPS와 같은 프로토콜을 사용하여 통신을 암호화할 수 있다.
• 서버와의 연결이 성공하면, 브라우저는 요청을 서버로 보낸다.

* TCP 핸드셰이크(TCP Handshake)

• IP 주소를 알고난 후에는, 브라우저는 서버와 TCP 핸드셰이크를 통해 연결을 설정한다.
• 이 방식은 데이터를 전송하기 전에 (주로 HTTPS를 통해서) 통신하려는 두 주체(이 경우에는 브라우저와 웹 서버)가 TCP 소켓 연결을 위한 매개변수를 주고 받을 수 있도록 만들어졌다.
• TCP의 3방향 핸드셰이크 기술은 "SYN-SYN-ACK" (더 정확히는 SYN, SYN-ACK, ACK)로 불리기도 한다.
• 두 컴퓨터 간 TCP 세션을 협상하고 시작하기 위해서 TCP가 3개의 메세지를 전달하기 때문이다.
• 이는 요청이 보내지기 전에 3개의 추가적인 메세지가 컴퓨터 사이에 주고받아진다는 의미이다.

 

* TLS 협상(TLS Negotiation)

• HTTPS를 이용한 보안성있는 연결을 위해서는 또 다른 "핸드셰이크"가 필요하다.
• (TLS 협상이라고 할 수 있는) 이 핸드셰이크는 통신 암호화에 쓰일 암호를 결정하고, 서버를 확인하고, 실제 데이터 전송 전에 안전한 연결이 이루어지도록 한다.
• 이를 위해서 자원에 대한 실제 요청 전에 클라이언트에서 서버로 3번 더 왕복해야한다.
• 연결에 보안성을 더하는 것은 페이지 로딩을 더디게 할 수 있지만 브라우저와 웹서버 사이에 전송되는 데이터가 제3자에 의해 해독될 수 없는 장점이 있다.
• 총 8번의 왕복 후, 브라우저는 요청을 할 수 있다.

5. 서버 응답

• 서버는 요청을 받고 웹 페이지의 데이터를 브라우저에게 응답한다.
• 응답은 일반적으로 HTML 문서와 함께 CSS 스타일시트, JavaScript 파일, 이미지, 비디오 등의 리소스도 포함할 수 있다.

---

렌더링 과정

6. HTML 파싱

• 렌더링 엔진은 받은 HTML 문서를 파싱하여 웹 페이지의 구조를 이해한다.
• 이 과정에서 HTML 요소, 태그, 속성 등을 해석하고, "콘텐츠 트리" 내부에서 태그를 DOM노드로 변환한다.

7. Render Tree 구축

• 브라우저는 파싱된 HTML과 CSS 정보를 결합하여 렌더링 트리를 생성한다.
• 렌더링 트리는 화면에 표시될 요소의 계층 구조를 나타낸다.
• 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.

8. 레이아웃 및 페인트

• 브라우저는 렌더링 트리를 기반으로 각 요소의 크기와 위치를 계산하고 화면에 표시한다.
• UI백엔드에서 렌더트리와 각 노드를 가로지르며 형상을 만들어낸다.
• 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 모든 HTML을 파싱할 때 까지 기다리지 않고 레이아웃과 페인트를 시작한다.
• 따라서 전송을 기다리며 이미 받은 내용의 일부를 먼저 화면에 표시한다.

 

---

9. 자바스크립트 실행

• 웹 페이지에 포함된 JavaScript 코드가 실행된다.
• 이를 통해 동적인 기능을 추가하거나 상호작용을 가능하게 한다.

10. 이벤트 처리

• 브라우저는 사용자의 입력 및 이벤트(마우스 클릭, 키보드 입력 등)를 감지하고 처리한다.
• 이벤트 처리기를 사용하여 웹 페이지의 동작을 제어하고 사용자와 상호작용한다.

11. 통신

• 웹 페이지가 추가적인 데이터를 필요로 할 때, 브라우저는 서버와 통신하여 데이터를 요청하고 응답을 받는다.
• 이를 통해 웹 페이지는 실시간 업데이트 및 동적 콘텐츠를 제공할 수 있다.

12. 캐싱

• 브라우저는 이전에 다운로드한 리소스를 캐시에 저장하여 다음에 같은 리소스를 요청할 때 다시 다운로드하지 않도록 한다.
• 이로써 웹 페이지 로딩 속도를 향상시킬 수 있다.

13. 보안

• 브라우저는 웹 페이지의 보안을 강화하기 위해 다양한 보안 기술과 메커니즘을 사용한다.
• 예를 들어, HTTPS를 통한 데이터 암호화, 동일 출처 정책(Same Origin Policy)를 통한 보안 제한 등이 있다.

14. 웹 페이지 표시

• 최종적으로 브라우저는 렌더링된 웹 페이지를 화면에 표시하고 사용자에게 보여준다.

 

 

 

 

 

참조

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

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work