4주차 Weekly paper : 브라우저의 동작방식
by 담담이담브라우저란?
웹 브라우저는 동기적으로
HTML, CSS, Javascript 언어를 해석해서
내용을 화면에 보여주는 응용 소프트 웨어이다.
브라우저의 구조
사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분
브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시
통 신: HTTP요청과 같은 네트워크 호출에 사용됨
JS 엔진: 자바스크립트 코드를 해석하고 실행
UI 백엔드: 기본적인 위젯(input, select,콤보 박스 등)을 그림
자료 저장소: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스
렌더링 엔진
요청 받은 내용을 브라우저 화면에 표시하는 역할을 한다.
렌더링 엔진 중 하나인 웹킷 엔진을 예시로 들자면,
HTML을 파싱해서 DOM 노드를 만들고, 이러한 DOM 노드들을 병합해서 DOM 트리를 만든다.
CSS를 파싱해서, CSSOM 트리를 만든다.
즉, 브라우저는 렌더링할 문서를 HTML과 CSS로 나눠서 해석한다.
하
자바스크립트 파싱 과정
렌더링 엔진은 HTML 문서를 순차적으로 파싱하다가,
script 태그를 만나는 순간 DOM 생성을 일시 중단한다.
script 태그의 src에 정의된
자바스크립트 파일을 서버에 요청하여 응답을 받으면
자바스크립트 엔진에게 제어권을 넘긴다.
이후, 자바스크립트 엔진이 파싱을 진행하고
이를 마치면 렌더링 엔진에게 다시 제어권을 넘긴다.
이처럼 브라우저는 동기적으로 HTML, CSS, Javascript를 처리한다.
자바스크립트 엔진에 권한이 있을 때 Javascript 코드가
완성되지 않는 DOM을 조작하게 된다면 에러가 발생할 것이기에
HTML 파일에서 JS코드를 <body> 태그 하단에 위치시킨다.
'Weekly paper' 카테고리의 다른 글
| 7주차 : 리액트에서 배열 렌더링 시, key를 써야 하는 이유 (0) | 2023.10.23 |
|---|---|
| 7주차 : 리액트에서의 Virtual DOM의 의미, 사용 이유 (0) | 2023.10.23 |
| 5주차 Weekly paper : HTTP 메소드 (1) | 2023.10.09 |
| 5주차 Weekly paper : 자바스크립트에서의 this (0) | 2023.10.09 |
| Weekly-paper 3주차 (0) | 2023.09.23 |
블로그의 정보
유명한 담벼락
담담이담