← 리스트로

브라우저 렌더링 과정

브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것. 자원은 보통 HTML문서지만 PDF나 이미지 또는 다른 형태일 수도 있다.
자원의 주소는 URI를 통해 정해진다.
HTML과 CSS명세에 따라 HTML파일을 해석하여 표시하며, 이 명세는 웹 표준화 기구인 W3C에서 정한다.
예전에는 부라우저들이 일부만 표준을 따르고 독자적으로 구현하여 호완성 문제가 있었지만, 요즘에는 대부분의 브라우저가 표준 명세를 따른다.

브라우저의 기본 구조

사용자 인터페이스 - 주소표시줄, 이전/다음 버튼, 북마크 메뉴 등
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 - 사용자가 요청한 컨텐츠를 표시, 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함
통신 - HTTP통신과 같은 네트워크 호출에 사용됨, 플랫폼에 독립적으로 동작하며 플랫폼의 하부에서 실행됨
UI백엔드 - 콤보박스와 창 같은 기본적인 장치를 그림
자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행
자료 저장소 - 웹데이터베이스 등 모든 종류의 자원을 컴퓨터에 기록하는 부분

렌더링 엔진

HTML과 이미지를 css로 표시

렌더링 엔진들

파이어폭스는 게코엔진, 크롭은 웹킷엔진을 사용한다.
웹킷은 리눅스플렛폼에서 동작하게 하기위한 엔진인데, 이후 사파리 브라우저를 지원하기 위해 수정되어졌다.

동작 과정

보통 통신을 통해 문서의 내용을 얻는 것에서 부터 시작됨
html파싱 -> 렌더트리 구축 -> 렌더트리 배치 -> 렌더트리 그리기
HTML파싱은 전통적으로 브라우저의 관용적인 정책 때문에, 상향식 또는 하향식으로 파싱이 안되며 특별한 알고리즘에 따라 파싱된다.

토큰화 알고리즘 & 트리구축 알고리즘

브라우저의 오류처리

브라우저는 모든 종류의 오류 구문을 알아서 교정해준다.
오류는 내부적으로 처리되고 사용자에게는 알려주지 않는다.

스크립트와 스타일시트의 진행순서

웹은 파싱과 실행이 동시에 실행되는 동기화 모델이다.
하지만 defer로 명시된 스크립트는 동기로 실행되지 않고 문서의 파싱이 진행된 후에 지연하여 실행한다.

스타일시트

이론적으로 스타일시트는 DOM트리를 변경하지 않기 때문에 문서파싱을 기다리거나 중단할 이유가 없다.
하지만 스크립트에서 문서를 파싱하는 동안 스타일 정보를 요청하는 경우라면 문제가 된다.
그리하여 문제가 될만한 스타일이 있는 경우에는 스크립트를 중단하고 스타일 파싱을 기다린후 처리된다.

렌더트리 생성

DOM트리와 css트리로 부터 생성되며 실제로 화면에 표시되는 요소들로만 구성된다.

렌더트리 배치

각 노드가 정확한 위치에 자리잡도록 배치

렌더트리 그리기

UI 백엔드에서 각 노드를 가로지르며 Paint작업을 함.