✅ 브라우저란?
브라우저란 동기적(Synchronous)으로 (HTML+CSS) , Javascript 언어를 해석하여 해석한 내용을 화면에 보여주는 소프트웨어이다.
✅ 동기적?
동기적(Synchronous)이란 뜻은 여러가지의 작업이 동시에 이루어지는 것이 아닌, 하나의 작업이 끝날때까지 다른 작업이 기다렸다가, 앞의 작업이 끝나면 그 다음 작업이 실행되는 방식을 동기적이라 하고, 반대되는 의미로 비동기적(Asynchronous)라는 방식이 있다.
✅ 브라우저가 동기적인 이유
뒤에 페이지가 렌더링되는 부분에서 설명하겠지만, DOM트리가 완성되기 전에 script가 DOM을 조작하면 에러가 발생하게 되고, 화면에는 우선적으로 HTML 요소들로 이루어진 레이아웃 화면이 렌더링 되고, 그 다음에 script를 읽어서 사용자와 상호작용하는 순서로 이루어지기 때문이다.
✅ 브라우저의 기본 구조
1. 사용자 인터페이스
사용자가 접근할 수 있는 영역. 브라우저를 열면 기본적으로 보이는 주소입력창, 북마크메뉴, 새로고침/홈버튼 등이 포함되어 있다.
2. 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. Data Storage를 참조하며 로컬에 데이터를 읽고 쓰면서 다양한 작업을 수행.
3. 렌더링 엔진
웹 서버에서 응답 받은 자원을 웹 브라우저에 나타내는 역할. HTML 문서를 응답받았다면, HTML와 CSS를 파싱하여 화면에 나타내준다. 브라우저의 동작원리를 이해하려면 렌더링 엔진의 이해가 중요하다.
4. 통신
HTTP 요청 같은 서버와 통신이 가능하게 해주는 네트워크 호출에 사용.
5. UI 백엔드
select, input 등 기본적인 위젯을 그리는 인터페이스
6. 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행한다.
7. 자료 저장소
Cookie, Local Storage 등 브라우저 메모리를 활용하여 저장할 수 있는 영역.
✅ 렌더링 엔진
HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시해주는 엔진.
✅ 렌더링 엔진 동작 과정
1. HTML 문서를 파싱하여 DOM트리를 구축.
2. CSS 파일의 스타일요소들을 파싱.
3. DOM트리와 스타일요소를 합쳐 렌더트리를 구축
4. 렌더트리의 각 노드들을 화면 상 어느 위치에 배치할 것인지 결정
5. UI백엔드에서 렌더트리의 노드들을 그려준다.
✅ 자바스크립트는?
자바스크립트는 렌더링 엔진에서 처리되지 않고, 별개의 자바스크립트 엔진이 처리한다. HTML이 파싱되다가 <script>태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성을 중지하고 자바스크립트 엔진으로 권한을 넘긴다. 자바스크립트 엔진은 script 태그의 src에 해당된 자바스크립트 파일을 로드하고 파싱하여 실행한다.
