📌 웹브라우저와 웹서버의 통신과정
브라우저 : 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석해 내용을 화면에 보여주는 응용소프트웨어
웹브라우저가 웹서버에 필요한 자원(웹페이지)를 요청하면 서버는 응답하고 웹브라우저는 이를 해석한 후 클라이언트에게 보여준다.
- 브라우저의 주요기능은 사용자가 자원을 서버에 요청하고 요청한 자원을 브라우저에 보여주는것으로
보통 자원은 HTML문서이지만 PDF,이미지 등 다양한 형태일 수 있다.
웹 브라우저에 URL을 입력하면 웹서버라 불리는 프로그램이 웹브라우저에 웹페이지를 제공한다.
REQUEST(요청) : 웹브라우저가 웹서버에 자원을 요청하는것
RESPONSE(응답) : 웹서버가 웹브라우저에게 제공하는것
보통 웹 브라우저와 웹 서버는 다른컴퓨터에 위치하며, 웹 서버가 다른 컴퓨터에서 실행되고 있으므로 웹 브라우저가 웹 서버에 요청을하려면 웹 서버가 돌아가고있는 컴퓨터의 주소를 알아야하는데 이 주소는 IP주소라고 한다.
보통 IP주소는 IPv4 32비트 방식으로 192.168.30.1 이런식의 숫자로 이루어져있는데
웹브라우저에서 요청하려면 이 숫자를 알아야할테지만 특별할것없는 숫자들의 모음이라 외우기가 쉽지않을것이다.
때문에 ex) naver.com 과 같이 각 사이트에서 지정한 도메인이름 입력해 요청하게되는데
입력된 도메인명을 IP주소로 변환시켜주는 일을 하는것이 DNS(Domain Name Server)라는것인데 이는 나중에 따로 포스팅을 할 예정이다.
📌 브라우저의 기본 구조
1. 사용자 인터페이스
사용자가 접근할 수 있는 영역이다. URI를 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼, 홈 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
Data Storage(데이터저장소)를 참조하여 로컬에 데이터를 쓰고 읽으며 다양한 작업을 한다.
3. 렌더링 엔진
웹서버로부터 응답받은 자원을 웹 브라우저상에 나타낸다.
예를들어 HTML문서를 응답받으면 HTML과 CSS를 파싱하여 화면에 표시한다.
브라우저의 동작원리를 이해하려면 렌더링엔진의 이해가 중요하다.
브라우저는 서버로부터 HTML문서를 응답받으면 렌더링엔진의 HTML파서와 CSS파서에 의해 파싱(parsing)되어
DOM, CSSOM 트리로 변환되고 렌더 트리로 결합하는데 이렇게 생성된 렌더트리를 기반으로 브라우저는 웹페이지를 나타낸다.
4. 통신
HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용된다.
5. UI백엔드
select, input 등 기본적인 위젯을 그리는 인터페이스이다.
6. 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행한다
7. 자료저장소
Cookie, Local Storage, Indexed DB 등으로 브라우저 메모리를 활용하여 지정하는 영역이다.
📌 렌더링 엔진
렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다.
각 브라우저마다 렌더링 엔진이 다르기때문에 같은 페이지가 브라우저별로 다르게 보이는 경우가 있다.
예를들면 인터넷도구 Elements탭에서 이런 코드들이 있는경우가 있다.
-moz-border-radius: 1em; // 파이어폭스 브라우저에 적용
-ms-border-radius: 2em; // 익스플로어에 적용, 보통 생략
-o-border-radius: 3em; // 오페라에 적용
-webkit-border-radius: 4em; // 구글, 사파리 브라우저에 적용렌더링 엔진 종류
- Blink : 크롬 ,오페라
- Webkit : 사파리
- Trident : 익스플로러
- EdgeHTML : 마이크로소프트 엣지
* Blink는 구글이 Webkit을 대체하기위해 자체적으로 개발한 엔진
렌더링 엔진은 좀 더 나은 사용자경험을 위해 가능하면 빠르게 내용을 표시하며 때문에 일련의 과정들이 동기적으로 진행되지않는다. HTML을 파싱할때까지 기다리지 않고 렌더트리 배치와 그리기 과정을 시작한다.
📌 렌더링 엔진 동작 과정
렌더링 엔진은 서버로부터 응답받은 HTML문서를 얻는 것으로 시작하며 이 문서의 내용은 보통 8KB 단위로 전송된다.
렌더링 엔진의 기본적인 동작과정
1. 렌더링 엔진을 HTML 문서를 파싱하여 DOM 트리를 구축한다.
2. 외부 CSS 파일과 함께 포함된 스타일요소를 파싱한다.
3. DOM트리와 2번의 결과물을 합쳐 렌더트리를 구축한다.
4. 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정한다.
5. UI 백엔드에서 렌더트리의 각 노드를 그린다.
동작과정의 순서는 위의 기본동작과정과 유사하게 진행된다.
①. 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트리를 생성한다.
②. CSSOM(Css Object Model)을 생성한다.
CSS파일은 스타일시트 객체로 파싱되고 각 객체는 CSS규칙을 포함한다.
CSS 규칙객체(CSSOM)은 선택자와 선언 객체 그리고 CSS문법과 일치하는 다른 객체를 포함한다.
③. 렌더 트리(DOM + CSSOM)을 생성한다.
DOM트리가 구축되는 동안 브라우저는 DOM트리를 기반으로 렌더트리를 생성한다. 렌더트리는 문서를 시작적인 구성요소로 만들어주는 역할을 한다.
웹킷은 이 구성 요소를 "렌더러(renderer)" 혹은 "렌더객체(render object)"라는 용어를 사용한다. 렌더러는 자신과 자식요소를 어떻게 배치하고 그려내야 하는지 알고있다.
렌더러는 DOM요소에 부합하지만 1:1로 대응하는 관계가 아닌데 이유는 <head>, display:'none'과 같이 사용자가 볼수 없는 DOM요소는 렌더트리에 추가되지 않기때문이다. (visibility 속성에 "hidden"값이 할당된 요소는 트리에 나타난다.)
④. 렌더 트리를 배치한다. ( 레이아웃 )
렌더트리는 위치와 크기를 갖고있지 않기때문에, 어느 공간에 위치해야할지 각 객체들에게 위치(position)과 크기(size)를 결정해준다.
⑤. 렌더트리를 그린다
렌더트리가 만들어져 레이아웃이 구성되었으면 UI백엔드가 동작해 렌더트리의 각 객체를 화면의 픽셀(px)값으로 나타낸다.
📌 자바스크립트 처리
위에서 서버로부터 응답받은 HTML문서를 파싱해 HTML과 CSS를 렌더링엔진이 처리하는 과정을 살펴봤다.
하지만 HTML문서에서 Javascript도 함께 있는 경우가 대부분인데 Javascript는 어디서 처리되는건지 알아보자
Javascript는 렌더링엔진이아닌 웹브라우저 기본구조에서 렌더링엔진 아래에 있던 Javascript엔진(자바스크립트 해석기)가 처리한다.
HTML파서는 <script>태그를 만나면 Javascript코드를 실행하기 위해 DOM생성프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘기는데, 제어권한을 넘겨받은 Javascript엔진은 <script> 태그내의 Javascript코드또는 src속성에 정의된 Javascript파일을 로드하고 파싱하여 실행한다. Javascript의 실행이 완료되면 다시 HTML파서로 제어권한을 넘겨서 중지했던 시점으로 돌아가 DOM생성을 재개한다.
이처럼 브라우저는 동기적으로 HTML, CSS, Javascript를 처리한다.
하지만 제어권한이 Javascript 엔진에 있을때 Javascript코드가 아직 제대로 작성되지않은 DOM을 조작하게 된다면 에러가 발생할것이다. 이것이 HTML파일에서 Javascript 코드를 <body>의 하단에 위치시키는 이유이다.
- 참고페이지
https://d2.naver.com/helloworld/59361
https://poiemaweb.com/js-browser
https://bbangson.tistory.com/87
'Backend > Internet' 카테고리의 다른 글
| 도메인네임이란? (1) | 2022.12.28 |
|---|---|
| DNS의 개념과 작동원리 (0) | 2022.12.25 |
| HTTP (0) | 2022.09.17 |
| 3-way handshake & 4-way handshake (0) | 2022.09.04 |
| TCP/IP (0) | 2022.09.04 |