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

인터넷에 www.google.com 또는 www.naver.com 을 검색했을 때 어떤 과정을 거쳐 화면에 보이게 될까?

웹 페이지를 움직이는 그 본질을 찾아서 알아보자.

 

• 주소창에 google.com을 입력하면 일어나는 일
• 브라우저의 렌더링 원리
• Reflow와 Repaint가 실행되는 시점

---

웹 브라우저 (Web borwser) : HTML 문서와 그림, 멀티미디어 파일 등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭이다. 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등이 있다.

월드 와이드 웹 (World Wide Web, WWW, W3) : 인터넷에 연결된 컴퓨터를 이용해 사람들과 정보를 공유할 수 있는 거미줄(Web)처럼 얼기설기 엮인 공간을 뜻하는 용어이다. HTTP 프로토콜을 기반으로 HTML로 작성된 하이퍼텍스트 페이지를 웹 브라우저라는 특정한 프로그램으로 읽을 수 있게 하도록 구성되어있다.

HTTP 프로토콜 : HTTP(Hypertext Transfer Protocol)는 HTML 문서와 같은 리소스들을 가져올 수 있도록 하는 프로토콜이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초며, 클라이언트-서버 프로토콜이기도 하다. 프로토콜(Protocol) 은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계이다.

DNS (Domain Name System Servers) : URL들의 이름과 IP주소를 저장하고 있는 데이터베이스로, 웹사이트를 위한 주소록을 의미한다. 숫자로 된 IP주소 (ex. 63.245.252.125) 대신 사용자가 사용하기 편리하도록 주소를 매핑해주는 역할을 한다.

TCP/IP (Transmission Control Protocol / Internet Protocol) : '전송제어규약'과 '인터넷규약'은 데이터가 어떻게 웹을 건너 여행하는지 정의하는 통신 규약이다. 이를 사용하겠다는 것은 IP 주소 체계를 따르며 TCP의 특성을 활용해 송신자와 수신자의 논리적 연결을 생성하고 신뢰성을 유지할 수 있도록 하겠다는 의미이다. 즉 송신자가 수신자에게 IP주소를 사용해서 데이터를 전달하고 그 데이터가 제대로 갔는지에 대해 이야기하는 것이다.

웹어플리케이션서버 (WAS, Web Application Server) : WAS는 사용자의 컴퓨터나 장치에 웹어플리케이션을 수행해주는 미들웨어를 의미한다. 브라우저로부터 요청을 받으면, 웹서버는 페이지의 로직이나 데이터베이스의 연동을 위해 WAS에게 이들의 처리를 요청한다. 그러면 WAS는 이 요청을 받아 동적인 페이지처리를 담당하고, DB에서 필요한 데이터 정보를 받아서 파일을 생성한다.

웹서버와 웹어플리케이션서버의 차이점
- 웹 서버 : 정적인 컨텐츠(HTML, CSS, IMAGE 등)를 요청받아 처리
- WAS : 동적인 컨텐츠(JSP, ASP, PHP 등)를 요청받아 처리
=> DB서버에 대한 접속 정보가 있기 때문에 외부에 노출 될 경우 보안상의 문제를 이유로 웹서버와의 연결을 통해 요청을 전달받음.

브라우저의 기본 구조

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

브라우저의 주요 구성 요소

렌더링 엔진

브라우저마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다. 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CPR이라는 프로세스를 사용한다.

 

렌더링 엔진의 기본적인 동작 과정 : DOM 트리 구축 위한 HTML 파싱 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기

 

- CRP (Critical Rendering Path, 주요 렌더링 경로) : 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 의미한다. CRP는 DOM(Document Object Model), CSSOM(CSS Object Model), 렌더 트리, 레이아웃을 포함한다.

- DOM : 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있도록 브라우저가 트리 구조로 만든 객체 모델을 의미한다. 뜻풀이 그대로, 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 객체를 의미하며, DOM은 HTML과 Javascript를 서로 이어주는 역할을 한다.

- CSSOM : CSS 내용을 파싱하여 자료를 구조화 한 것을 의미한다. 즉 DOM처럼 CSS 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 의미한다.

- 파싱 : 하나의 프로그램을 런타인 환경이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미한다. 즉, 파싱은 문서의 내용을 토큰(token)으로 분석하고, 문법적 의미와 구조를 반영한 노드 트리를 생성하는 과정인데 이를 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부른다.

- 렌더 트리(Render Tree) : 렌더 트리는 DOM과 CSSOM 트리의 결합으로 만들어진다. 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout, 레이아웃)을 계산하는데 사용되고 픽셀을 화면에 렌더링 하는 페인트(Paint), 즉 화면에 요소들을 표현하는 프로세스를 위해 존재한다.

스크립트

웹은 파싱과 실행이 동시에 수행되는 동기화(synchronous) 모델이다. 제작자는 파서가 <script> 태그를 만나면 즉시 파싱하고 실행하기를 기대한다. 스크립트가 실행되는 동안 문서의 파싱은 중단된다. HTML5는 스크립트를 비동기(asynchronous)로 처리하는 속성을 추가했기 때문에 별도의 맥락에 의해 파싱되고 실행된다.

 

즉, 정리하자면

1. 사용자가 google.com을 입력
2. URL 주소 중 도메인 네임 부분을 DNS 서버에서 검색
3. DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달
   : ISP(Internet Service Provide)의 DNS서버가 호스팅하고 있는 서버의 IP주소를 찾기 위해 DNS query를 날린다.
4. 브라우저는 HTTP 를 이용하여 요청 메시지를 생성하고, HTTP 요청 메시지는 TCP/IP 를 이용해 웹서버로 전달
   : TCP로 연결되면 브라우저는 GET 요청을 통해 서버에게 www.google.com 의 웹페이지를 요구한다.
5. 웹어플리케이션서버와 데이터베이스에서 우선 웹페이지 작업을 처리
6. 작업 처리 결과를 웹서버로 전송
7. 웹서버는 웹브라우저에게 HTML 문서결과를 응답 (response)
8. 브라우저는 response를 받아 파싱하여 화면에 렌더링
   8-1. 서버로부터 넘겨받은 HTML, CSS 파일을 다운로드
   8-2. DOM, CSSOM 생성
   8-3. Javascript 실행 (HTML 중간에 스크립트가 있으면 HTML 파싱 중단)
   8-3. Render Tree 구축 (display: none 같이 공간을 차지하지 않는 것은 렌더트리로 구축 안함)
   8-4. Render Tree Layout
   8-5. Render Tree Paint

렌더링 최적화

추가적으로 렌더링 최적화에 대해서 알아보자.

Reflow : 어떤 이벤트나 액션에 의해 html 요소의 크기나 위치가 바뀔 경우에 그에 영향 받는 모든 노드들의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정.

• 윈도우 Resizing (viewport 크기 변경)
• 노드의 추가, 또는 제거
• 요소의 위치, 크기 변경 (left, margin, padding, border 등)
• 폰트 변경, 이미지 크기 변경
• CSS3 애니메이션, 트랜지션
• 유저 행동. hover 효과, 필드에 텍스트 입력, 창 크기 조절 등

Repaint : Reflow가 끝난 후 다시 Paint가 일어나는 과정

• Reflow 실행 이후
• 레이아웃에 영향을 주지 않는 스타일 속성의 변경이 일어나는 경우 : 가시성이 변경되는 순간 (opacity, background-color, visibility, outline)

 

https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/browser-rendering.md

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️

https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/reflow-repaint.md

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️

https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/what-happens-when-type-google.md

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️

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

https://velog.io/@eassy/www.google.com%EC%9D%84-%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90%EC%84%9C-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%9D%BC

'www.google.com'을 주소창에서 입력하면 일어나는 일

https://velog.io/@eassy/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%90%98%EB%8A%94-%EA%B3%BC%EC%A0%95%EC%97%90-%EB%8C%80%ED%95%B4-%EC%84%A4%EB%AA%85%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94

브라우저 페이지가 렌더링 되는 과정에 대해 설명해주세요