브라우저 동작 원리(2) 렌더링 엔진 - 웹킷(Webkit), 블링크(Blink), Reflow, Repaint

렌더링 엔진 - 웹킷(Webkit), 블링크(Blink)

렌더링 엔진

• 웹 서버에 저장된 내용 정보(HTML, XML)와 서식 정보(CSS, XML) 등을 읽어 들여 사람이 읽을 수 있는 문서로 표시하는, 웹 브라우저의 핵심 기능을 담당하는 부분

• 실행 작업

  • 불러오기(Loading)

  • 파싱(Parsing)

  • 자바스크립트 실행

  • 레이아웃(Layout)작업

  • CSS처리

  • 그리기

  • 이벤트 처리

  • HTML 편집

• 렌더링 엔진 기본 흐름

  • 브라우저 엔진은 웹 표준화 기구 W3C(World Wide Web Consortium)에서 정의한 HTML과 CSS 표준 명세에 따라 파일을 해석하고 브라우저에 표시

  • 렌더링 엔진이 HTML 문서를 Parsing하고, 내부에서 DOM(Document Object Model) 노드로 변환

  • CSS파일과 스타일 요소를 함께 Parsing, Render Tree를 생성

  • Render Tree는 색상이나 Dimension들을 포함하는 그래픽적 속성들의 사각형을 포함하며 사각형들은 올바른 순서대로 화면에 표시된다.

  • Render Tree를 생성한 후에 Render Tree의 “Layout” 과정을 수행한다. 다시 말해, 각 노드들이 화면 상에서 정확히 그들이 놓여있어야 할 곳에 나타나게 된다.

  • 다음 과정은 “Painting”인데 이 과정에서 Render Tree를 순회하면서 스타일 정보를 찾아서 UI 백엔드를 이용하여 각 노드들을 화면 상에 표현하게 된다.

렌더 트리 배치(Reflow)

크기와 위치에 맞게 브라우저에 배치하는 과정을 Reflow라고 합니다. 위치를 결정하는 방법에는 3가지가 존재합니다.

• Nomal: 문서의 위치에 따라 배치, DOM 트리와 동일

• Float: Normal과 같이 배치된 후, 끝(왼 or 오른)으로 이동

• Absolute: DOM 트리와 다른 자리에 배치

렌더 트리 표현(Repaint)

시각적인 요소가 표현되는 과정을 Repaint라고 합니다. 표현이 되는 순서로는 아래와 같습니다.

• 배경색 > 배경이미지 > 테두리 > 자식 > 아웃라인

웹킷(Webkit)

• WebKit은 웹브라우저 시장의 40% 점유율을 가지는 웹 렌더링 엔진

• 웹 애플리케이션을 개발하는 기업이 자체 개발

• Safari 브라우저, Chrome 브라우저(28 버전 이전), 안드로이드 기기용 브라우저 등에 사용했었음

블링크(Blink)

• 2015년 구글은 크롬의 웹 렌더링 엔진으로 사용하던 WebKit을 대체하는 Blink라는 Webkit에서 파생된 새로운 웬 렌더링 엔진을 사용하기 시작함

• 블링크는 구글의 개방형 프로젝트 ‘크로미움’과 웹킷 엔진을 기초로 설계된 기술

• 웹브라우저 개발 환경 간소화

  • 웹킷 엔진과 비교해 7가지 개발 시스템을 줄일 수 있음

  • 7천개가 넘는 개발용 파일과 450만여줄에 이르는 소스코드를 제거할 수 있을 것

• 알림 기능 확장

  • 리치(Rich) 알림기능 : 알림 메시지가 나타나면 바로 반응할 수 있다는 점이 차이점

  • 단순히 알림으로 끝나는 것이 아니라 답장을 보내는 등 알림창에서 바로 반응할 수 있음

• 구글 나우 지원

  • 버스 정류장에 도착하면 자주 이용하는 버스가 언제 올지 알려주는 기능

Reference

브라우저 렌더링 엔진 : https://12bme.tistory.com/208 
웹브라우저는 어떻게 동작하나? : https://www.slideshare.net/JinKyoungHeo/1-2-53043752