웹 기본 지식
브라우저
브라우저의 주요 기능
브라우저의 주요 기능
사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
자원은 HTML 문서, PDF, 이미지 등이 있다.
브라우저는 웹 표준화 기구(W3C/World Wide Web Consortium)에서 정한 명세에 따라 HTML 파일을 해석해서 표시한다. (예전과는 다르게 대부분의 브라우저가 표준 명세를 따라 호환성이 좋다.)
브라우저의 UI
브라우저의 사용자 인터페이스(User Interface)는 일반적으로
-
URI(Uniform Resourse Idenrifier/자원의 주소)를 입력할 수 있는 주소 표시 줄
-
이전 버튼과 다음 버튼
-
북마크
-
새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
-
홈 버튼
의 요소를 가지고 있다.HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적인 요소를 제외하고 브라우저의 필수 UI를 정의하지 않았다.
브라우저의 기본 구조
브라우저의 구성 요소
- 사용자 인터페이스(UI): 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청 페이지 화면을 제외한 모든 나머지 부분. 브라우저와 사용자가 상호작용 할 수 있는 접점.
- 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 사용자가 주소창에 어떤 요청을 하면 브라우저는 응답을 가져올 수 있도록 렌더링 엔진을 컨트롤한다.
- 렌더링 엔진: 요청한 콘텐츠를 표시(사용자가 요청한 사이트를 그려주는 역할). HTML과 CSS를 파싱해서 화면에 표시해주는 것. (Webkit, Gecko가 있고 브라우저마다 다른 엔진을 사용) -> 프론트엔드에는 중요!
- 통신: HTTP 요청과 같은 네트워크 호출. 인터넷에서 리소스를 가져올 때 사용.
- UI 백엔드: 콤보 박스와 윈도우 창 등 기본적인 내장 UI들을 그려주는 역할. 브라우저는 여러 OS에서 만들었고, 그 OS의 API들을 사용할 수 있어 Mac, Window 사용 시 각각 기본 브라우저 UI가 달라짐.
- 자바스크립트 해석기: Javascript interpreter. 자바스크립트 번역기로 자바스크립트 코드를 해석하고 실행한다.
- 자료 저장소: 자료를 저장하는 계층. 쿠키, 캐시, 서비스워커, 로컬 스토리지 등 모든 데이터를 저장.
렌더링 엔진
랜더링 엔진
렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시해주는 역할을 한다.
일반적으로는 HTML 문서를 표시하지만, XML, 이미지도 가능하며 플러그인/확장 기능을 통해 PDF 같은 유형의 문서 또한 표시할 수 있다.
렌더링 엔진의 동작 과정
렌더링 엔진은 요청한 문서의 내용을 얻는 것 부터가 시작이다. 그 내용은 통신에서 온다.
동작 과정은 기본적으로 파싱 -> 빌드 -> 배치 -> 페인팅
- 파싱: HTML 문서를 파싱하고 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환. CSS 파일과 함께 포함된 스타일 요소도 파싱.
- 빌드: HTML과 CSS를 합쳐 렌더 트리를 생성.
- 배치: 렌더 트리 생성 완료 시 배치 시작. 각 노드가 화면의 정확한 위치에 표시되는 것.
- 페인팅: 렌더 트리를 화면에 그림.
렌더링 엔진은 더 나은 UX를 위해 모든 HTML이 파싱될 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.
네트워크에서 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.
[참고 및 출처]
https://d2.naver.com/helloworld/59361
https://another-light.tistory.com/42?category=844048
