이 글은 html5rocks.com에 "How Browsers Work: Behind the scenes of modern web browsers"를 참고하여 작성한 글입니다.
브라우저 주소창에 http://naver.com 나 https://www.daum.net/같은 url을 입력하고 엔터를 누르면 어떻게 새로운 페이지가 뜨는지 배워보겠습니다.
1. 브라우저
브라우저는 웹 페이지, 이미지, 비디오 등 다양한 정보를 수신, 전송, 그래픽 표현을 하는 소프트웨어 이다. 예를 들어 마이크로소프트 엣지, 크롬, 사파리, 파이어폭스 등이 있습니다.
브라우저는 클라이언트 / 서버 모델로 클라이언트는 웹 서버에 접속하여 정보를 요청하고, 서버는 해당 정보를 HTTP프로토콜을 따라 웹 브라우저에 전송합니다.
2. 브라우저의 기능
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서이지만 이미지, 비디오 등 다양한 형태일 수 있습니다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다.
브라우저는 HTML과 CSS 명세에 따라 HTML파일을 해석해서 표시합니다. 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정합니다.
브라우저의 사용자 인터페이스(UI, User Interface)는 서로 비슷한데 아래와 같은 요소들을 일반적으로 포함합니다.
- URI를 입력할 수 있는 주소 표시 줄
- 이전 버튼, 다음 버튼
- 북마크
- 새로고침 버튼, 현재 문서의 로드를 중단하는 버튼
- 홈 버튼
3. 브라우저의 기본 구조
브라우저의 기본 구성 요소는 아래와 같습니다.
- 사용자 인터페이스 (UI, User Interface)
- 주소 표시줄, 이전/다음 버튼, 북마크 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분 - 브라우저 엔진 (Browser Engine)
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 - 렌더링 엔진 (Rendering Engine)
- 요청한 콘테츠를 표시, 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시 - 통신
- HTTP 요청과 같은 네트워크 호출에 사용됨, 이는 플랫폼 독립적 인터페이스이고 각 플랫폼 하부에서 실행됨 - UI 백엔드
- 콤보 박스와 창 같은 기본적 장치를 그림, 플랫폼에서 명시하지 않은 일반적 인터페이스로 OS 사용자 인터페이스 체계를 사용 - 자바스크립트 해석기
- 자바스크립트 코드를 해석하고 실행 - 자료 저장소
- 쿠키 등 모든 종류의 자원을 하드디스크에 저장하는 계층, HTML5 명세에는 브라우가 지원하는 '웹 데이터 베이스'가 정의
4. 렌더링
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 것입니다.
렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있습니다. 또한, 플러그인이나 브라우저 확장 기능으로 PDF 등 다양한 유형의 자료를 표시하는 것이 가능합니다.
렌더링 엔진 종류
- 크롬, 사파리 : 웹킷(Webkit) 엔진 사용
- 파이어폭스 : 게코(Gecko) 엔진 사용
웹킷(Webkit)은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진이다. 이후에 애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정을 했습니다.
렌더링 동작 과정
렌더링 엔진은 통신으로 부터 요청한 문서의 내용을 얻는 것으로 시작하는데 보통 문서 내용을 8KB 단위로 전송됩니다.
아래 그림은 렌더링 엔진의 동작 과정입니다.
렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 1)DOM(Document Object Model) 노드로 변환합니다. 그 다음 외부 CSS 파일과 함께 포함된 모든 스타일 요소를 파싱합니다. 스타일 정보와 HTML 표시 규칙은 렌더 트리 라고 부르는 또 다른 트리를 생성합니다.
렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함 하고, 이는 정해진 순서대로 화면에 표시됩니다.
렌더 트리 생성이 끝나면 각 노드가 화면의 정확한 위치에 표시되도록 배치합니다. 이후에 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 그리는 과정이 진행됩니다.
위의 과정이 점진적으로 진행되며, 렌더링 엔진은 좀 더 나은 사용자 경험(UX, User eXperience)을 위해 가능한 빠르게 내용을 표시하는데 모든 HTML을 파싱할때 까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되는 것을 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것입니다.
1) DOM (Document Ojbect Model
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
웹 페이지의 소스들을 보면 <html>, <body>와 같은 태그들이 존재합니다. 이를 Javascript에서 활용할 수 있는 객체로 만들면 문서 객체(Document Ojbect)가 됩니다.
모델(Model)은 모형, 모듈과 같은 의미를 가집니다. 여기서는 문서 객체를 '인식하는 방식' 이라고 할 수 있습니다.
요약해 보자면 DOM은 넓은 의미로 웹 브라우저가 HTML을 인식하는 방식을 의미하고, 좁은 의미로는 document 객체와 관련된 객체의 집합을 의미합니다.
DOM은 이후에 더 자세하게 공부하도록 하겠습니다.
5. 파싱과 DOM 트리 구축
파싱 (Parsing)
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있도록 구조를 변환하는 것을 말합니다. 파싱 결과는 문서구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부릅니다.
2+3-1 과 같은 표현식을 예를 들면 아래의 트리와 같습니다.
문법
파싱은 문서에 작성된 언어 또는 형식의 규칙을 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 규칙에 따라야 합니다. 이것을 문맥 자유 문법이라고 합니다. 인간의 언어는 이런 모습과 다르기 때문에 기계적으로 파싱할 수 없습니다.
파서-어휘 분석기 조합
파싱은 어휘 분석고 구문 분석이라는 두 가지로 구분할 수 있습니다.
어휘 분석은 자료를 토큰으로 분해하는 과정입니다. 토큰은 유효하게 구성된 단위의 집합체로 용어집이라고도 할 수 있는데 예로 들자면 사전에 등장하는 모든 단어에 해당합니다.
구문 분석은 언어의 구문 규칙을 적용하는 과정입니다.
파서는 보통 두 가지 일을 합니다
- 자료를 유효한 토큰으로 분해하는 어휘분석기
- 언어 구문 규칙에 따라 문서 구조를 분석함으로 파싱 트리를 생성
어휘 분석기는 공백과 줄 바꿈 같은 의미 없는 문자를 제거합니다.
[문서 소스로부터 파싱 트리를 만드는 과정]
파서는 보통 어휘 분석기로부터 새 토큰을 받아 구문 규칙과 일치하는지 확인합니다. 규칙에 맞으면 토큰에 해다하는 노드가 파싱트리에 추가되고 파서는 또 다른 토큰을 요청합니다.
변환
파서 트리는 최정 결과물이 아닙니다. 파싱은 보통 문서를 다른 양식으로 변환하는데 컴파일이 하나의 예가 됩니다. 소스 코드를 기계 코드로 만드는 컴파일러는 파싱 트리 생성 후 이를 기계 코드 문서로 변환합니다.
파싱 예
2+3-1 수학 표현식을 파싱 트리로 만든 것을 위에서 보았습니다. 간단한 수학 언어를 정의하고 파싱 과정을 살펴 보겠습니다.
어휘 : 수학 언어는 정수, 더하기 기호, 빼기 기호를 포함합니다.
구문 :
- 언어 구문의 기본적인 요소는 표현식, 항, 연산자 입니다.
- 언어에 포함되는 표현식의 수는 제한이 없습니다.
- 표현식은 '항' 뒤에 '연사자' 그 뒤에 또 다른 항이 따르는 형태로 정의합니다.
- 연산자는 더하기 토큰 또는 빼기 토큰 입니다.
- 정수 토큰 또는 하나의 표현식은 항입니다.
2+3-1 수학 표현식을 분석해 보겠습니다.
규칙에 맞는 첫 번째 부분 문자열은 2 입니다. 규칙 5번에 따르면 이것은 하나의 항입니다.
두 번째로 맞는 것은 2+3 인데 이것은 항 뒤에 연산자와 또 다른 항이 등장한다는 세 번째 규칙과도 일치합니다.
세 번째로 2+3-1 까지 진행하게 되면 2+3은 항 - 연산자 - 항으로 구성된 새로운 항이라는 것을 알기 때문에 2+3-1은 하나의 표현식이 됩니다. 2++은 규칙과 맞지 않기 때문에 유효하지 않은 입력입니다.
6. 요약
- 주소창에 url을 입력하고 엔터를 누르면, 서버에 요청이 전송됩니다.
- 브라우저는 HTML과 CSS 명세에 따라 HTML파일을 해석해서 표시합니다.
- 렌더링 엔진은 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시하는 역할을 합니다.
- HTML 파싱은 HTML파서가 문서에 존재하는 어휘와 구문을 분석하여 태그를 DOM 트리로 만듭니다.
- CSS 파싱은 CSS파서가 모든 CSS 정보를 스타일 구조체로 생성합니다
- 스타일 정보와 HTML 표시 규칙을 가지고 렌더 트리를 만듭니다.
- 렌더 트리 생성이 끝나면 각 노드가 화면의 정확한 위치에 표시되도록 배치합니다.
- 이후에 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 그리는 과정이 진행됩니다.
- 빠르게 화면에 표시하기 위해 HTML 파싱 과정을 모두 기다리지 않고 기다리는 동시에 받은 내용의 일부분을 화면에 표시합니다.
참고 문서
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks
In this comprehensive primer, you will learn what happens in the browser between when you type google.com in the address bar until you see the Google page on the browser screen.
www.html5rocks.com
https://d2.naver.com/helloworld/59361
'Web' 카테고리의 다른 글
| css의 position (0) | 2022.04.22 |
|---|---|
| 서버 사이드 렌더링과 클라이언트 사이드 렌더링 (0) | 2021.09.01 |
| REST API (0) | 2021.08.31 |
| 쿠키 & 세션 (0) | 2021.08.30 |
| HTTP 프로토콜 (0) | 2021.08.25 |
댓글