브라우저 동작 원리
브라우저
- 웹 브라우저는 HTML, CSS 명세에 따라 HTMl파일을 해석해서 페이지를 표시한다
- 종류
- 크롬
- 네이버 웨일
- 파이어폭스
- 사파리 등등
브라우저 구성요소
이미지 출처 : https://d2.naver.com/helloworld/59361
사용자 인터페이스- 사용자가 접근할 수 있는 영역 - ( URI를 입력하는 주소 표시줄, 이전/다음 버튼, 새로고침 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분 )
브라우저 엔진- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 - Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업한다
렌더링 엔진- 브라우저는 서버로부터 HTMl 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합한다
- 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타낸다
통신- HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용된다
UI백엔드- 기본적인 위젯을 그리는 인터페이스
자바스크립트 해석기- 자바스크립트 코드를 해석하고 실행한다
자료 저장소- 쿠키, 로컬스토리지, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역
렌더링 엔진 동작 과정
이미지 출처: https://d2.naver.com/helloworld/59361
- 렌더링 엔진이 먼저 HTML문서를 파싱하여 DOM 트리를 구축한다
- CSS 마크업을 파싱하여 앞서 구축한 DOM 트리와 함께 스타일 요소를 파싱한다
- DOM 트리와 CSSOM 트리의 결과물이 합쳐져 렌더 트리(Render Tree) : (DOM + CSSOM) 로 결합한다
- 렌더 트리는 화면에 보여줄 요소들만 가지고 있는 트리로, 구축이 되면 각 노드에 대해 부모 , 자식 순서로 요소가 배치된다
- 브라우저는 웹 페이지를 나타낸다
그렇다면 자바스크립트는?
- 자바스크립트는 렌더링 엔진에서 처리 되지 않고 자바스크립트 엔진이 처리한다
- HTML 파서는
<script>태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘긴다 - 제어 권한을 넘겨받은 자바스크립트 엔진은
<script>태그 내의 Javascript 코드 또는 src 속성에 정의된 Javacript 파일을 로드하고 파싱하여 실행한다 - Javascript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개한다
- Javascript 코드가 완성되지 않은 DOM을 조작하게 되면 에러가 발생하기 때문에 HTML 파일에서 Javascript 코드를
<body>태그 하단에 위치시킨다
정리
- 브라우저는 동기적(Syncronous) (어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식) 으로 HTML, CSS, Javascript 를 해석하고 내용을 화면에 보여준다
참고링크 :
블로그 -
CSSOM(CSS Object Model)이란 무엇인가
[CS] 웹 브라우저는 어떻게 작동하는가?
🐢 💨 💨