[CS] 웹 브라우저 동작 원리(3)
이번에도 저번 웹 페이지 로드과정에 이어서 웹 브라우저의 구성요소와 동작 과정에 대해서 살펴보겠습니다.
아마도 이번 포스팅이 "웹 브라우저 동작 원리"의 마지막 포스팅이 될 것 같습니다.
웹 브라우저 주요 구성 요소
아래 그림은 웹 브라우저의 주요 구성 요소를 도식화 한 이미지입니다.
브라우저는 어떻게 동작하는가?
https://d2.naver.com/helloworld/59361
위의 이미지만 보면 저게 다 뭔지 싶을 수 있습니다..
각 단계를 찬찬히 살펴보겠습니다.
텍스트로만 보면 이해하기 어려울 수 있기 때문에, 실제 웹 페이지를 보면서 이야기해보겠습니다.
제가 운영하는 핸드메이드 액세서리 브랜드입니다 ^^
사용자 인터페이스
주소 표시줄, 이전/다음, 새로고침, 북마크, 탭 등. 웹 페이지를 보여주는 창을 제외한 사용자가 인터렉션 할 수 있는 나머지 모든 부분입니다.
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 다리역할을 합니다.
렌더링 엔진
위의 도식화된 이미지를 보면, 왠지 모르게 통신 부분과 자바스크립트 해석기, UI 백엔드와 직접적으로 연관이 있는 렌더링 엔진이 중요해 보입니다.
실제로 프론트엔드 개발자로서 가장 신경써서 보아야할 부분 중 하나인데요. 어떤 이유에서인지 알아보도록 합시다.
렌더링 엔진은 실질적으로 웹 페이지를 표현하는 부분을 나타냅니다.
요청한 콘텐츠를 표시하는 엔진이며, HTML과 CSS를 파싱하여 화면에 표시하거나 XML 문서, 이미지 등을 표시합니다. 또한 플러그인이나 브라우저 익스텐션을 이용해 PDF 등 다른 유형의 문서나 파일들도 표시할 수 있습니다.
렌더링 엔진에는 아래와 같은 종류들이 존재합니다.
- Gecko : 모질라, 파이어폭스
- Blink : 구글, 오페라
- Webkit : 사파리
- Trident : 익스플로러
- EdgeHTML : 마이크로소프트 엣지
브라우저마다 사용하는 렌더링 엔진이 다르기 때문에, 모든 브라우저가 동일한 소스를 동일하게 화면에 표시하지 못합니다. 이는 *크로스브라우징 이슈가 나타나는 원인이기도 한데, 프론트엔드 개발에서 자주 언급되는 중요한 이슈이기도 합니다.
이에 대해서는 나중에 자세히 다룰 기회가 있을 것 같습니다.
*크로스브라우징 이슈 : 모든 브라우저와 디바이스에서 가능한 동등한 수준의 정보, 기능을 제공하는 것이 크로스 브라우징(cross browsing) 입니다. 하지만 동일한 코드라도 브라우저마다 화면에 다르게 표시되는 경우가 있는데, 이를 크로스브라우징 이슈라고 합니다.
css를 작성할 때 브라우저마다 다르게 코드를 적용시키는 것을 볼 수 있는데 이를 벤더 프리픽스(vendor prefix) 라고 하며, 마찬가지로 브라우저별로 렌더링 엔진에 차이가 있기 때문에 작성해 주는 것입니다.
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;통신
HTTP 요청과 같은 네트워크 호출에 사용됩니다. 이는 플랫폼 독립적인 인터페이스이며 각 플랫폼 하부에서 실행됩니다.
자바스크립트 해석기
자바스크립트 엔진이라고도 하며, 자바스크립트 코드를 해석하고 실행하는 프로그램 혹은 인터프리터입니다.
자바스크립트 엔진은 표준적인 인터프리터로 구현될 수도 있고, 혹은 자바스크립트 코드를 바이트코드로 컴파일하는 JIT(Just-In-Time) 컴파일러로 구현할 수도 있습니다. 여러 목적으로 사용될 수 있지만 주로 웹 브라우저를 위해 사용되며, 여러 엔진들 중 구글의 V8 엔진이 가장 잘 알려져있습니다.
UI 백엔드
콤보 박스와 창 같은 기본적인 장치를 그립니다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용합니다
자료 저장소
쿠키나 로컬스토리지 등과 같은 데이터, 자료들을 저장하는 영역입니다. HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스가 정의되어 있습니다.
렌더링 엔진의 동작 과정
웹 브라우저에 구성요소에 이어서 동작과정을 알아보겠습니다. 아래 그림은 렌더링 엔진의 동작과정을 도식화한 순서도입니다.
하나씩 살펴보도록 하겠습니다.
DOM 트리 구축을 위한 HTML 파싱
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미합니다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부릅니다.
파싱은 정해진 용어와 구문 규칙에 따라 파싱하는데, 어휘 분석(토큰 변환)과 구문 분석으로 구분 할 수 있습니다.
어휘 분석은 자료를 토큰, 즉 트리를 생성하기 위한 하나의 작은 단위로 분해를 하는 과정입니다. 그렇게 분해된 토큰을 사용하여, 분석된 문서 구조(구문)에 따른 파싱 트리를 생성합니다.
문서를 파싱하는 과정에서 <script> 태그를 만나면 자바스크립트를 해석할 때까지 파싱을 멈추게됩니다. 이 때문에 일반적인 html 문서작성에서 <script> 태그를 문서의 아래 쪽에 선언해준다고 봐도 될 것 같습니다.
렌더 트리 구축
DOM과 CSSOM을 결합하여 화면에 그려낼 내용을 작성합니다. 브라우저는 DOM 트리가 구축되는 동안 렌더 트리를 구축하는데, 표시해야할 순서와 올바른 내용을 그려내기 위한 목적을 가지고 있습니다.
일반적으로 웹킷에서는 이 구성요소를 renderer 혹은 render object라 칭합니다.
이 과정에서 어떤 요소에 어떤 스타일을 적용할 것인지 정해집니다.
렌더 트리 배치
렌더 트리의 생성 후 각 노드의 배치가 시작되는데, 이는 각 노드의 크기와 위치를 계산하여 정확한 위치에 표시하는 것을 의미합니다.
일반적으로 배치는 왼쪽에서 오른쪽, 위에서 아래로 흐르는 방식입니다.
배치는 HTML 문서의 최상위 렌더러에서 시작하여, 프레임 계층의 일부 혹은 전부를 통해 반복 실행됩니다. 또 반복되는 과정에서 각 렌더러에 필요한 크기와 위치 정보를 계산합니다.
렌더 트리 그리기
화면에 내용을 표시하기 위한 렌더트리가 탐색되고 "paint" 메서드가 호출됩니다. 이때 정보를 화면에 픽셀로 전환하는 작업을 Resterizing(래스터화) 라고 합니다.
이 단계에서는 요소가 stacking contexts에 쌓이는 순서에 영향을 미치기 때문에, 블록 렌더러의 순서에 따라 그려집니다.
블록 렌더러가 쌓이는 순서는 아래와 같습니다.
- 배경 색
- 배경 이미지
- 테두리
- 자식
- 아웃라인
"렌더 트리 그리기" 단계에서 요소들은 픽셀로 변환되어 그려지는데, 픽셀로 그려진 레이어들은 Compositing(합성) 단계를 거쳐 화면에 나타나게 됩니다.
여기서 말하는 레이어는 화면 구성을 위해 브라우저 내부에서 구분, 구조화한 요소를 말합니다.
여기까지 브라우저의 렌더링 엔진이 어떻게 동작하는지 간단히 알아보았는데요.
위에서 정리했던 지금까지의 과정은 점진적으로 진행되는 점을 주목하면 좋을 것 같습니다. 브라우저에서 문서를 읽었을때 모든 요소가 파싱이 완료될때까지 대기하고 다음 단계가 실행되는 것이 아니라, 네트워크로부터 전송받은 내용의 일부분을 먼저 화면에 표시하며 점진적으로 일련의 과정을 실행합니다.
이는 더 나은 사용자경험을 위함인데요. 사용자가 웹의 모든 구성 요소가 전부 그려질때까지 흰 화면에서 기다리는 것보다, 하나씩이라도 요소가 나타나면서 필요한 작업이 진행되고 있음을 보여주는 것이 좋은 방법이기 때문입니다..!
리뷰
웹 브라우저가 어떻게 동작하는지 자세히 알기 위해서는 조금 더 상세하게 공부를 해야하지만, 이번 포스팅을통해 각 요소들이 어떠한 역할들을 하며 웹 브라우저를 동작시키기 위해서 어떻게 맞물려 동작하고 있는지 거시적으로 알 수 있었던 것 같습니다.
하지만 역시 공부한 내용들을 알기 쉽게 정리하고 내것으로 만드는 과정이 쉽지만은 않은 것 같습니다ㅠㅠ "웹 브라우저의 동작 원리" 포스팅은 여기까지 마무리하고, 더 좋은 내용을 위해 공부해오겠습니다 ㅎㅎ
더 자세한 내용들은 이번 포스팅 맨 처음에 첨부한 링크에서 확인 하실 수 있습니다~
'개발 이야기 > Computer Science' 카테고리의 다른 글
| [CS] 웹 브라우저 동작 원리 (2) (0) | 2021.06.05 |
|---|---|
| [CS] 웹 브라우저 동작 원리 (1) (0) | 2021.06.02 |