브라우저 주요 기능
- 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원의 주소는 URI에 의해 정해진다.
- 브라우저는 HTML, CSS의 명세에 따라 HTML파일을 해석해서 표시하는데, 이명세는 웹표준화 기준인 W3C에서 정한다.
브라우저의 기본구조
-
사용자 인터페이스
주소표시줄, 이전/다음 버튼, 북마크 기능 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분 -
브라우저 엔진
사용자 인터페이스와렌더링 엔진사이의 동작을 제어 -
렌더링 엔진
요청한 콘텐츠를 표시. 예를들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다. -
통신
HTTP 요청과 같은 네트워크 호출에 사용 -
UI 백엔드
콤보박스와 창 같은 기본적인 장치를 그림 -
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행 -
자료저장소
자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있다.
렌더링 엔진
렌더링 엔진의 역할을 요청을 받은 내용을 브라우저 화면에 표시하는 일이다.
렌더링 엔진은 HTML및 XML 문서와 이미지를 표시할 수 있다.
물론 플러그인과 다른 확장 기능을 이용해 PDF같은 다른 유형도 표시할 수 있지만 여기서는 HTML과 CSS로 표시하는 주된 사용패턴에 초점을 둘 것이다.
렌더링 엔진들
여기서 다루는 주된 브라우저인 파이어폭시, 크롬, 사파리는 두 종류의 렌더링 엔진으로 제작되었다.
파이어폭스 -> 모질라에서 직접 만든 게코(Gecko)엔진
크롬, 사파리 -> 웹킷 엔진(Webkit)
웹킷은 리눅스에서 동작하기위해 만들어진 오픈소스.
애플에서 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정을 가했다.
동작 과정
렌더링엔진의 동작 과정
1. DOM 트리 구축을 위한 HTML 파싱
2. 렌더트리 구축
3. 렌더트리 배치
4. 렌더트리 그리기
동작 과정 예
- HTML,CSS 각각의 파서가 있고 HTML은 각 태그들로 DOM트리를 구성, CSS도 스타일 규칙에 맞게 파싱된 후 같이
렌더트리생성 - 그 후에 배치가 시작되는 데 이것은 각 노드가 화면에 정확한 위치에 표시되는 것을 의미한다.
- 그리기 과정을 시작한다.
- 모든 내용을 한번에 파싱된 후 보여주기엔 속도가 느리기 때문에 기다리지 않고 파싱과 배치가 이뤄진다.
- 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.
렌더트리
게코 : 형상트리, 각요소를 형상(frame)
웹킷 : 렌더 객체로 구성되어 있는 렌더트리
배치
게코 : 리플로(reflow)
웹킷: 배치(layout)
어태치먼트(attachment)
웹킷이 렌더트리를 생성하기 위해 DOM 노드와 시작 정보를 연결하는 과정
게코는 콘텐츠 싱크(content sink)라고 부른다.
파싱과 DOM 트리 구축
파싱 일반
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리 또는 문법 트리 라고 부른다.
정리
- html,css는 파싱되어 Dom과 SSom으로 변환되고, 렌더트리로 결합된다.
- 이렇게 생성된 렌더트리를 기반으로 layout을 배치하고, 브라우저에 페인트하는것이 렌더링 과정이다.
🌏 브라우저 렌더링 과정
렌더링이란 ?
렌더링이란, 개발자가 작성한 문서(html,css,javascript)가 브라우저 화면에 출력되는 과정
렌더링 과정
- 서버에서 받아온 html,css 문서를 DOM과 SSOM 변환하여 DOM트리와 SSOM트리로 만든다.
- html,css 문서는 단순 텍스트기 때문에 Object Model로 연산관리를 해줘야한다.
- 변환된 DOM 트리와 SSOM 트리로 렌더트리를 생성한다.
- 렌더트리에는 스타일 정보가 표시되어 있으며 화면에 필요한 노드들로만 구성된다. (display:none은 포함되지 않음)
- layout - 렌더트리에서 노드들이 가지고 있는 속성과 스타일에 따라서 브라우저에 어떤 크키나 위치에 출력할지 레이아웃을 잡는 단계
- paint - 레이아웃이 완료되면 실제 화면에 그리는 과정
자바스크립트를 만나면?
- html파서는 script를 만나면 dom을 생성을 중지하고 자바스크립트 엔진에 권한을 넘긴다.
- 자바스크립트가 끝나면 다시 html 파서로 권한을 주고 중지되었던 시점부터 dom을 생성한다.
- 따라서 script 위치에 따라 dom생성이 지연될 수 있다. (또한 돔이 생성되지 않은 상태에서 돔을 조작하면 에러가 발생한다.)
- 때문에 body의 가장 마지막에 script를 넣어줘야 한다.
📌 요약된 링크 정리
