정의
- 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
- 자원의 주소는 URI에 의해 정해진다
- 보통 자원은 HTML, PDF, 이미지 등 다양한 형태일 수 있다.
- 웹 브라우저의 종류로는 크롬, 네이버웨일, 파이어폭스, 사파리등이 대표적인 예 이다.
구조
1) 사용자 인터페이스: 사용자가 접근 할 수 있는 영역이다.(창 제외한 나머지 모든 부분, 주소표시줄, 북마크 등)
2) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다
3) 렌더링 엔진 : 요청한 컨텐츠 표시 (HTML, 이미지등)
렌더링 엔진의 종류)
-> Blink - 크롬, 오페라 (구글이 webkit를 대체하기 위해 자체적으로 개발한 엔진)
-> Webkit - 사파리
-> Trident - 익스플로어
-> EdgeHTML - 마이크로소프트 엣지
각 브라우저마다 렌더링 엔진이 다르기때문에 같은 페이지가 다르게 보이는 경우가 있다 그래서 크로스 브라우징을 사용한다.
4) 통신 : HTTP 요청과 같은 서버와 통신이 가능하게 하는 네트워크 호출에 사용된다
5) UI백엔드 : select, input 등 기본적인 위젯을 그리는 인터페이스 이다
6) 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행한다
7) 자료저장소 : Cookie, Local Storage 등 브라우저 메모리를 활용하여 저장하는 영역이다
렌더링 엔진 동작과정
렌더링 엔진은 서버로부터 응답받은 HTML 문서를 얻는것으로 시작한다
1. HTML 문서를 파싱하여 DOM 트리를 생성한다
2. CSS 마크업을 처리하여 CSSOM 트리를 생성한다
3. DOM트리와 2의 결과물을 결합하여 렌더링 트리를 생성한다
4. 렌더링 트리 배치 : 각 노드에 대해 화면에서의 정확한 위치와 크기를 계산한다.
5. 렌더 트리 그리기 : UI 백엔드에서 렌더링 트리의 각 노드를 가로지르며 렌더링한다.
이 과정들을 점진적으로 진행된다. 렌더링 엔진은 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다. 이는 좀 더 나은 사용자 경험(UX)를 위한 것이다.
