브라우저
브라우저
사용자가 인터넷 상에 연결된 웹 서버에서 저장되어 있는 하이퍼텍스트 및 하이퍼미디어 등의 모든 정보를 불러와 디지털기기 화면에 보여주는 역할을 하는 응용소프트웨어다. 웹브라우저의 주소창에서 해당 자료가 있는 URL을 입력하여 자료를 요청하면 해당 서버에서 문서를 가져와 클라이언트에게 보여주는 사용자 인터페이스 역할을 한다.
[네이버 지식백과] 브라우저 (시사상식사전, pmg 지식엔진연구소)
웹 브라우저(web browser)는 인터넷망에서 정보를 검색하는 데 사용하는 응용 프로그램을 말한다. 브라우저 혹은 인터넷 브라우저라고 부르기도 한다. 이를 통해 사용자들은 영상을 보거나 메일을 주고 받고 다양한 자료를 올리고 내려 받는 등 다양한 활동이 가능하다. 일반적인 기능으로는 웹 페이지 열기, 최근 방문한 인터넷 주소(URL) 및 즐겨찾기 제공, 웹페이지 저장 기능 등이 있다.
[네이버 지식백과] 웹 브라우저 - 웹페이지를 보여주는 프로그램 (용어로 보는 IT, 강일용, IT 동아)
브라우저 = 웹브라우저와 같은 말이다.
브라우저 주요 기능
HTML, CSS, JavaScript, WASM에 이르는 다양한 언어를 해석
해석한 결과를 바탕으로 렌더링
쉽게 사용하지만 생각보다 많은 영역을 수행해주는 애플리케이션
- 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원의 주소는 URI에 의해 정해진다.
- 브라우저는 HTML, CSS의 명세에 따라 HTML파일을 해석해서 표시하는데, 이명세는 웹표준화 기준인 W3C에서 정한다.
브라우저의 사용자 인터페이스는 서로 닮아 있는데 다음과 같은 요소들이 일반적이다.
- URI를 입력할 수 있는 주소 표시 줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
웹 브라우저 종류
- Chrome (Google)
- Safari (Apple)
- Edge (MS)
- Firefox (Mozilla)
- Opera (Opera software)
브라우저 구성
- 브라우저 엔진(렌더링 엔진)
- 자바스크립트 엔진
- 통신 모듈
브라우저의 기본구조
-
사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
-
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
-
렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
-
통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
-
UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
-
자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
-
자료 저장소 - 이 부분은 자료를 저장하는 계층. Local Storage, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역
브라우저 엔진
- 브라우저가 동작하는 데 필요한 기반 기술을 모두 포함하는 엔진
- 브라우저 엔진에 따라서 동작 방식이 유사
브라우저 엔진 종류
- Blink Engine (Chrome, Opera, Edge)
- Webkit Engine (Safari)
- Servo Engine (Firefo), Gecko Engine (Firefox)
ios
- 모든 브라우저가 WenKit 기반
- Safari 브라우저에 스킨을 씌우는 정도
브라주저 동작원리
렌더링엔진의 동작 과정은 다음과 같다.
자세한 동작원리는 브라우저는 어떻게 동작하는가?에서 확인하자
- DOM 트리 구축을 위한 HTML 파싱
- 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환
- 외부 CSS 파일과 함께 포함된 스타일 요소 파싱
- 렌더트리 구축
- 스타일 정보와 HTML 표시 규칙은 렌더 트리라고 부르는 또 다른 트리를 생성
- 렌더트리 배치
- 노드가 화면의 정확한 위치에 표시
- 렌더트리 그리기
- UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정
모든 내용을 한번에 파싱된 후 보여주기엔 속도가 느리기 때문에 기다리지 않고 파싱과 배치가 이뤄진다.
네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.
정리
위 내용이 너무 어려워서 간단하게 렌더링 과정을 좀 더 정리하면
-
서버에서 html, css문서를 받아온다.
-
받아온 문서를 html을 DOM(Document Object Model)로 변환 생성한다.
-
DOM을 생성하는 동안 css문서도 CSSSOM(CSS Object Model)로 변환한다.
-
변환된 DOM, CSSOM 트리를 결합하면 렌더 트리가 된다.
-
변환된 렌더 트리는 Reflow(배치)단계를 거쳐 화면의 크기에 맞춰 정확한 위치와 크기를 계산한다.(Layout 단계라고도 한다.)
-
배치단계가 끝나게되면 Repaint (그리기)단계를 통해 Reflow에서 계산한 위치, 크기를 제외한 나머지 CSS 속성들( 텍스트, 색상, 투명도, 이미지, 그림자 )을 적용 UI 백엔드를 이용하여 실제 화면에 그린다.
참고자료
브라우저와 브라우저 엔진 소개 : https://www.youtube.com/watch?v=kc3KRK-evec
브라우저는 어떻게 동작하는가? :
https://d2.naver.com/helloworld/59361
브라우저 동작 원리 :
https://yilpe93.github.io/Web/browser/
[WEB] Browser의 Rendering_1. DOM과 SSOM :
https://twofivezero.tistory.com/55
https://twofivezero.tistory.com/56
[웹개발] 브라우저의 작동 원리
https://it-ist.tistory.com/110
브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화 :
https://boxfoxs.tistory.com/408
