PracticeEveryday
웹 브라우저의 동작 원리 본문
웹 브라우저의 작동 원리
주소창에 https://www.naver.com https://youtube.com 등 다양한 URL을 검색하여 해당 웹 페이지에 접속했을 때
우리는 어떤 동작 원리에 의해 입력된 웹 페이지로 접속이 가능 할까?
브라우저 browse: 검색 둘러보다 검색하다 인터넷
- 웹 브라우저는 동기적(Synchronous)으로 (HTML + CSS), Javascript 언어를 해석한 내용을 화면에 보여주는
응용 소프트 웨어이다.
// 왜 웹브라우저는 동기적으로 동작할까
Script 태그를 body 태그 하단에 위치시키는 아이디어에서 찾을 수 있다.
HTML 요소들이 script 로딩 지연으로 인해 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
DOM이 완성되기 전에 script가 DOM을 조작한다면 에러가 발생한다.
자바 스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.- 웹 브라우저가 웹 서버에 필요한 자원 ( 웹 페이지 )를 요청하면 서버는 응답하고 웹 브라우저는 이를 해석한 후
사용자( Client ) 에게 보여 줍니다. 보통 자원은 HTML 문서이지만 PDF, 이미지 등 다양한 형태일 수 있습니다.
브라우저의 구조
1. 사용자 인터페이스
- 사용자가 접근할 수 있는 영역입니다. URL을 입력하는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼과
현재 문서 로드를 중단할 수 있는 정지 버튼, 홈 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분입
니다.
2. 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다. Data Storage를 참조하여 로컬에 데이터를 쓰고 읽으며
다양한 작업을 합니다.
- 브라우저 엔진(browser engine)은 주된 모든 웹 브라우저의 핵심이 되는 소프트웨어 구성요소이다. 브라우저 엔진의 주된 역할은 HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 상호작용적인 시각 표현으로 변환시키는 것이다.
3. 렌더링 엔진
- 웹 서버로부터 응답받은 자원을 웹 브라우저 상에 나타냅니다. 예를 들어 HTML 문서를 응답받으면 HTML과 CSS를
파싱하여 화면에 표현합니다. 브라우저의 동작 원리를 이용하려면 렌더링 엔진의 이해가 중요합니다.
- 브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱
( parsing :내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것 )되어 DOM, CSSOM 트리로 변환되고
렌더 트리로 결합합니다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타냅니다.
DOM ( Document Object Model ) 문서 객체 모델
CSSOM ( CSS Object Model ) CSS 객체 모델
4. 통신
- HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용됩니다.
5. UI 백엔드
- Select, Input 등 기본적인 위젯을 그리는 인터페이스입니다.
6. 자바스크립트 해석기
- 자바스크립트 코드를 해석하고 실행합니다.
7. 자료 저장소
- Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역입니다.
렌더링 엔진 render 세우다 engine : 힘을 만드는 장치
- 렌더링 엔진은 HTML, XML, 이미지 등 요청을 받은 내용을 브라우저 화면에 표시하는 엔진입니다.
// 각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있습니다.
-moz-border-radius: 1em; // 파이어폭스 브라우저에 적용
-ms-border-radius: 2em; // 익스플로어에 적용, 보통 생략
-o-border-radius: 3em; // 오페라에 적용
-webkit-border-radius: 4em; // 구글, 사파리 브라우저에 적용렌더링 엔진은 나은 사용자 경험을 위해 가능한 빠르게 표시하기 위해 일련의 과정들을 동기적으로 진행하지 않습니다.
HTML 파싱 할 때까지 기다리지 않고 렌더 트리 배치와 그리기 과정을 시작합니다.
렌더링 엔진 동작 과정
- 렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는 것으로 시작합니다.
- 이 문서는 보통 8KB 단위로 전송됩니다.
1. 렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 구축합니다.
2. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱합니다.
3. DOM 트리와 2의 결과물을 합쳐 렌더 트리를 구축합니다.
4. 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정합니다.
5. UI 백엔드에서 렌더 트리의 각 노드를 그립니다.
1. HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 구축합니다.
- DOM은 마크업과 1:1 관계를 성립합니다.
<html>
<body>
<p>Hello World</p>
<div><img src="example.png" /></div>
</body>
</html>- 위의 코드는 아래와 같은 DOM 트리로 변환할 수 있습니다.
- 브라우저는 서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통해 파싱( parsing ) 한 후 파싱 트리를
생성합니다.
- 생성된 파싱 트리를 기반으로 DOM 트리를 생성합니다!
2. CSSOM( CSS Object Model )을 생성합니다.
- CSS 파일은 스타일 시트 객체로 파싱 되고 각 객체는 CSS 규칙을 포함합니다. CSS 규칙 객체 (CSSOM)은
선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함합니다.
3. 렌더 트리( DOM + CSSOM )을 생성합니다.
- DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성합니다. 렌더 트리는 문서를
시각적인 구성 요소로 만들어 주는 역할을 합니다.
- 웹킷은 이 구성 요소를 렌더러(renderer: 인도자, 주는 사람, 양도하는 사람) 또는 렌더 객체( render object )라는
용어를 사용합니다.
- 렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있습니다.
- 렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계가 아닙니다.
- <head>, display: 'none' 과 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에 추가 되지 않습니다.
=> visibility ( : 눈에 보임) 속성에 hidden 값이 할당된 요소는 트리에 나타납니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
4. 렌더 트리를 배치합니다. ( Layout 형세 形 모양 형 勢 형세 세 : 기운차게 뻗치는 모양이나 상태)
- 렌더 트리는 위치와 크기를 가지고 있지 않기 때문에, 어느 공간에 위치 해야 할 지 각 객체들에게
위치 ( Position )과 크기 ( Size )를 결정해줍니다.
5. 렌더 트리를 그립니다.
- 렌더 트리가 만들어져 레이아웃이 구성되었으면 UI 백엔드가 동작하여 렌더 트리의 각 객체를 화면의 픽셀(Px)값으로
나타냅니다.
자바 스크립트는?
- 위 과정 까지만으로도 웹 페이지를 화면에 나타내는 것은 충분하다.
- Javascript는 렌더링 엔진이 처리하지 않고 자바스크립트 엔진이 처리한다.
- HTML파서는 <script> 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고
자바스크립트에게 권한을 넘기게 된다.
- 권한을 넘겨 받은 JavaScript 엔진은 <script> 태그 내의 JavaScript 코드 또는 src 속성에 정의된 JavaScript 파일을
로드하고 파싱하여 실행하게 됩니다.
- JavaScript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨 중지했던 시점으로 돌아가 DOM 생성을
재개합니다.
- 이처럼 브라우저는 동기적으로 HTML, CSS, JavaScript를 처리합니다. 하지만 자바스크립트 엔진에 제어 권한이
있을 때 JavaScript 코드가 완성되지 않은 DOM을 조작하게 된다면 에러가 발생하게 된다.
- 이 것이 HTML 파일에서 JavaScript를 <body> 태그에 위치시키는 이유이다.
[CS] 웹 브라우저는 어떻게 작동하는가?
웹 브라우저 작동 원리 주소창에 https://www.naver.com 혹은 https://www.youtube.com 등 다양한 URL을 검색하여 해당 웹 페이지에 접속한 경험이 있을 겁니다. 그렇다면 어떤 동작 원리로 우리가 입력한 웹
bbangson.tistory.com
'정리 > Question' 카테고리의 다른 글
| 1바이트 === 8비트 + Parity Bit (0) | 2022.05.16 |
|---|---|
| 컴퓨터는 왜 2진수를 쓸까 (0) | 2022.05.16 |
| JavaScript 엔진 구조 (0) | 2022.05.16 |
| JavaScript// 싱글 스레드 (0) | 2022.05.15 |
| 얕은 복사 vs 깊은 복사 + 함정 (0) | 2022.05.13 |
