브라우저란?
웹 브라우저는 동기적으로 HTML+CSS, JavaScript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어다.
웹 브라우저가 웹 서버에 필요한 자원(웹 페이지)을 요청하면 서버는 응답하고,
웹 브라우저는 이를 해석한 후 사용자(Client)에게 보여준다.
보통 자원은 HTML 문서지만 PDF, 이미지 등 다양한 형태일 수 있다.
웹 브라우저의 대표적인 예로는 크롬, 사파리, 네이버 웨일, 파이어폭스 등이 있다.
브라우저의 구조
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, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진을 말한다.
각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다.
렌더링 엔진의 종류
Blink - 크롬, 오페라 (구글이 Webkit을 대체하기 위해 자체적으로 개발한 엔진)
Webkit - 사파리
Trident - 익스플로어
EdgeHTML - 마이크로소프트 엣지
렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하기 때문에 일련의 과정들이 동기적으로 진행되지 않는다. 그리고 HTML을 파싱 할 때까지 기다리지 않고 렌더 트리 배치와 그리기 과정을 시작한다.
렌더링 엔진 동작 과정
렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는 것으로 시작합니다. 이 문서의 내용은 보통 8KB 단위로 전송됩니다.
① 렌더링 엔진은 HTML 문서를 파싱 하여 DOM(Document Object Model) 트리를 구축
② 그다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱 → CSSOM(Css Object Model) 생성
③ DOM 트리와 ②의 결과물(CSSOM)을 합쳐 렌더 트리를 구축
④ 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정
⑤ UI 백엔드에서 렌더 트리의 각 노드를 그림
JavaScript 엔진
자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.
HTML 파서는 <script> 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘긴다.
제어 권한을 넘겨받은 자바스크립트 엔진은 <script> 태그 내의 Javascript 코드 또는 src 속성에 정의된 Javascript 파일을 로드하고 파싱 하여 실행한다.
Javascript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개한다.
브라우저는 동기적으로 HTML, CSS, Javascript를 처리한다.
하지만 자바스크립트 엔진에 제어 권한이 있을 때 Javascript 코드가 완성되지 않은 DOM을 조작하게 된다면 에러가 발생할 것이다.
그렇기 때문에 HTML 파일에서 Javascript 코드를 <body>태그 하단에 위치시키는 것이다!
참고
https://bbangson.tistory.com/87
'IT 지식 > Web' 카테고리의 다른 글
| 브라우저 저장소(local storage, session storage, cookie) (0) | 2023.03.31 |
|---|---|
| [Web] HTTP와 HTTP 메시지 구조 (0) | 2023.03.30 |
| Restful API (0) | 2023.03.27 |
| [Web] 웹페이지가 브라우저에 렌더링되는 과정 (0) | 2023.03.27 |
| [Web] 쿠키(Cookie)와 세션(Session) (0) | 2023.01.16 |
