브라우저가 어떻게 동작하는지 설명해주세요.
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서이지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Unifrom Resource Identifier)에 의해 정해진다.
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다.
브라우저의 기본 구조
- 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
- 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- 렌더링 엔진: 요청한 컨텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함
- 통신: HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
- UI 백엔드: 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로 OS 사용자 인터페이스 체계를 사용
- 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행
- 자료 저장소: 자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
렌더링
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.
렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같이 다른 유형도 표시할 수 있다.
렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 내용은 보통 8KB 단위로 전송한다.
파싱
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree)또는 문법 트리(syntax tree)라고 부른다.
DOM 트리 구축
CSSOM 트리 구축
CSSOM 트리는 DOM 트리와 달리, CSS를 모두 파싱한 후에 구성할 수 있다. 만약 CSSOM 트리가 완전히 구성되지 않았다면 렌더트리를 만들지 못하기 때문에 브라우저 렌더링이 차단된다.
렌더 트리 구축
- DOM 트리와 CSSOM 트리가 결합되어 렌더링 트리를 형성한다.
- 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함된다.
렌더 트리를 생성하기 위해 브라우저는 다음 작업을 수행한다.
- DOM 트리의 루트에서 시작하여 표시되는 각 노드를 순회한다.
- 일부 노드는 표시되지 않으며 (예: 스크립트 태그, 메타 태그 등) 렌더링된 출력에 반영되지 않으므로 생략된다.
- 일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서도 생략된다. 예를 들어, 위의 예에서 span 노드는 'display: none' 속성을 설정하는 명시적 규칙이 있으므로 렌더링 트리에서 누락된다.
- 표시되는 각 노드에 대해 적절한 CSSOM 규칙을 찾아 적용한다.
- 콘텐츠 및 계산된 스타일과 함께 표시되는 노드를 내보낸다.
페인트
화면에 배치된 요소에 색을 채워 넣는다.
브라우저는 효율적인 페인트를 위해 구성 요소를 여러 개의 레이어로 나눠서 작업하기도 한다.
효율적인 페인트 과정을 위해 구성요소를 여러개의 레이어로 나눠서 작업하기도 한다.
컴포지트
컴포지트(composite) 단계는 각 레이어를 합성하는 작업을 한다.
reflow를 발생시키는 속성: position, display, width, height, float, font-family, top, left, font-size, font-weight, line-height, min-height, margin, padding, border 등 repaint를 발생시키는 속성: background, background-image, background-position, border-radius, border-style, box-shadow, color, line-style, outline 등
transform, opacity와 같은 속성을 사용하면 해당 요소를 별도의 레이어로 분리하고 작업을 GPU에 위임하여 처리함으로써 레이아웃 단계와 페인트 단계를 건너뛸 수 있다. 이것을 하드웨어 가속(GPU 가속)이라고 한다.
특정 요소에 하드웨어 가속을 사용하려면 요소를 별도의 레이어로 분리하여 GPU로 보내야 하는데, transform 속성과 opacity 속성이 이 역할을 한다. 분리된 레이어는 GPU에 의해 처리되어 레이아웃 단계와 페인트 단계 없이 화면상의 요소의 스타일을 변경할 수 있다.
분리된 레이어는 GPU에 의해 처리되어 레이아웃 단계와 페인트 단계 없이 화면상의 요소의 스타일을 변경할 수 있다. 따라서 리플로우와 리페인트를 일으키는 width, height, color 등의 속성이 아닌 transform 또는 opacity 속성을 이용한 애니메이션 성능이 더 좋을 수 밖에 없다.
transform: translate()는 처음부터 레이어를 분리하지 않고 변화가 일어나는 순간 레이어를 분리한다. 반면에 trasnform: translate3d() 또는 scale3d()와 같은 3d 속성들, 또는 will-change 속성은 처음부터 레이어를 분리해두기 때문에 변화에 더욱 빠르게 대처할 수 있다. 물론 레이어가 많아지면 그만큼 메모리를 많이 사용하기 때문에 주의해야한다.