2022. 3. 4. 00:06ㆍStudy/CS
브라우저란
World Wide Web(WWW)에서 콘텐츠 검색 및 탐색을 할 수 있는 응용프로그램을 말한다.
종류로는 크롬, 익스플로러, 사파리 등이 있다.
브라우저 구성
사용자 인터페이스
이전/다음 버튼, 새로고침/정지 버튼, 홈 버튼, 주소 표시줄, 북마크 메뉴 등
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 즉, 사용자가 액션을 취하면(uri 입력, 새로고침 클릭 등) 렌더링 엔진에게 전달하는 역할을 한다.
또한 Data Storage를 참조하여 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 한다.
렌더링 엔진
웹 서버로부터 응답받은 자원(HTML, XML, 이미지 등)을 웹 브라우저 상에 나타낸다.
이 때, HTML과 CSS는 렌더링 엔진의 HTML parser, CSS parser에 의해 파싱되어 DOM, CSSOM 트리로 변환되며 렌더 트리로 결합된다. 이 렌더 트리를 기반으로 브라우저 화면에 표시된다.
렌더링 엔진 종류
Blink - 크롬, 오페라
Gecko - 파이어폭스
Webkit - 사파리
Trident - 익스플로러
EdgeHTML - 마이크로소프트 엣지
통신
서버와 통신이 가능하게 하는 네트워크 호출에 사용된다.
UI 백엔드
렌더링 엔진에서 생성된 렌더 트리를 브라우저에 그려준다.
자바스크립트 해석기(인터프리터/엔진)
자바스크립트 코드를 해석하고 실행한다.
자바스크립트 엔진 종류
V8 - 크롬
SpiderMonkey - 파이어폭스
JavascriptCore - 사파리
자료 저장소
Cookie, Local storage, Session storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역
브라우저 작동 원리
사용자 인터페이스를 통해 요청을 받는다.
브라우저 엔진이 이를 서버에 요청하고, 응답 받은 자료를 기반으로 브라우저 엔진이 렌더링 엔진에게 전달한다.
렌더링 엔진의 HTML/CSS 파서가 HTML/CSS을 파싱하여 DOM/CSSOM 노드를 만들고 합쳐서 DOM/CSSOM 트리를 만든다.
(렌더링 엔진마다 동작과정은 차이가 있다. 여기서는 webkit 기준으로 설명한다.)
이 때 HTML 파서는 <script>태그를 만나면 HTML 파싱을 중단하고 자바스크립트 엔진으로 권한을 넘긴다. 권한을 넘겨받은 자바스크립트 엔진은 스크립트 파일을 로드하고 파싱하여 실행한다. 실행이 완료되면 다시 HTML 파싱을 시작한다. 이 때문에 주로 javascript 코드를 body 하단에 위치 시킨다. 그러나 defer, async 속성을 통해 제어할 수 있다.
DOM 트리와 CSSOM 트리를 결합해 렌더 트리를 만든다. (Attachment)
렌더 트리를 배치(Layout)하고 화면에 그린다.(Painting)
만약 DOM이 변경된다면 다시 화면에 그려주는데 이를 Reflow, Repaint 이라고 한다. 이 두가지 모두 성능 저하를 발생 시킬 수도 있기 때문에 최적화를 위해 고려하는 것도 좋은 방법이다.
리플로우 (Reflow)
DOM 요소의 기하학적 속성(width, height 등), 브라우저 사이즈 등이 변경될 때 렌더트리를 재생성하는 작업이다.
자식, 부모, 조상 요소까지 레이아웃 계산이 진행되므로 리페인트 보다 성능에 영향을 끼친다.
리페인트 (Repaintit)
변경된 요소를 화면에 그려주는 작업을 말한다.
리플로우가 실행될 때, 요소의 스타일이 변경되었을 때, visibility 속성이 변경될 때 발생한다. 리플로우가 발생하면 반드시 리페인트가 실행되지만 크기, 폰트 사이즈 등 단순한 속성들이 바뀌게 되면 리페인트만 실행된다.