browser의 동작

• 들어가기 전에
  

웹을 통해서 전달되는 데이터는 어딘가에서 해석되어야 한다. 서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 'Browser' 이다. Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있다. 이런 작업의 대부분은 브라우저 내부에서 이루어지기 때문에 반드시 알아야하는 것은 아니지만 브라우저의 내부를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제를 해결할 수 있고, 보다 최적화된 웹개발을 할 수 있다.

• 학습 목표

1. HTML 파일이 올 때 브라우저가 어떻게 렌더링과정을 거쳐서 화면에 보이게 되는지 간단히 이해한다.

• 핵심 개념

- Web Browser Rendering

• Browser의 동작 1

- 브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어이다. 브라우저의 동작에 대해서는 사실 개발자들도 잘 알 필요가 없다고 생각해왔다. 왜냐하면 브라우저에서 알아서 해결해주었기 때문. 하지만 6-7년 전부터 브라우저의 동작에 대해 조금씩 궁금함을 갖게 된 이유는 '브라우저의 동작이 대게 숨겨져있고, 내가 작성한 코드를 브라우저에서는 다르게 해석해서 보여주는 것 같다. 또는 어떻게하면 브라우저에서 빨리 실행될 수 있도록 코드를 작성할 수 있을까?' 하는 것에서 출발했다.

 

- Browser components

· 브라우저는 브라우저 컴포넌트로 구성되어 있다.

· UI(User Interface) : 화면에 보이는 것들

· Browser engine : 소스코드를 실행해서 화면에 보여줄 수 있는 엔진. 브라우저 소프트웨어를 동작 시켜주는 핵심 엔진.

· Rendering engine : 화면에 직접 어떤 위치를 잡고 색칠을 해주는, 픽셀 단위로 어떤 것들이 그려져서 사용자들이 다양한 형태로 볼 수 있음

· Data storage : 일부의 데이터를 캐시하고 저장한 것들을 관리하는 영역

· Networking : HTTP를 통해서 웹서버, 특정 인터넷 주소를 해석한 다음에 그 주소의 서버와 통신. 네트워킹 모듈

· JavaScript interpreter : 자바 스크립트 코드를 해석

· UI Backend : UI 영역을 처리

- Rendering engines

· ex) 파이어폭스의 Gecko, 사파리의 Webkit, 크롬과 오페라의 Blink(크롬은 크로미움도 존재)

· 브라우저 별로 렌더링엔진은 다름

- Main flow

· HTML을 먼저 파싱(Parsing) : 파싱이란, 문자 단위로 하나하나 다 해석을 해서 내용이 가진 의미를 파악해서 어떤 DOM(Document Object Model) 트리 데이터 객체로 구조화 시킴. HTML은 대게 구조화된 정보이기 때문에 HTML 태그들을 해석하여 일종의 트리 구조의 형태로 데이터를 다시 가지고있게 됨

· Render tree construction : 렌더 트리를 만듦

· Layout of the render tree : 렌터 트리를 기준으로 CSS(스타일 정보와 구조)를 합쳐서 매칭을 하게 됨. 화면에 어떻게 배치할지와 같은 것들을 결정하게 됨

· Painting the render tree : 그런 것들이 결정되면 화면에 직접 그림을 그리게 된다.

- WebKit main flow

· 2011년에 나온 그림이지만 지금의 모든 브라우저들도 이와 유사한 형태로 레이아웃을 하고 있다. 

· 먼저 HTML 코드를 받고, HTML 파싱을 하게된다.

· 그 다음에 DOM 트리라는 어떤 계층을 만든다. 각각의 DOM 트리는 결국에는 화면에 어떤 크기, 색깔로 표현되어야 하기 때문에 CSS 코드가 필요, DOM 트리와 CSS 두 가지를 합치게 되어 있음

· 두 가지를 Attachment, 합쳐서 어떤 엘리먼트에 어떤 스타일을 부여하는 작업을 하고 렌더 트리를 그린다. 각각의 DOM 트리별로 어떤 스타일 정보를 가지고 있는지 렌더 트리를 다시한번 객체화 시켜서, key와 value로 된 구조로 만드는 것이 일반적인 방법이다.

· 그 다음 레이아웃을 결정, 각각 어디에 배치될지, 크기는 얼만큼인지가 모두 결정된다.

· 그리고 레이아우셍 따라 화면에 실제로 페인팅, 표현하는 작업이 이루어진다.

· DOM을 파싱하고 렌더 트리를 그리고 화면에 표시하는 것이 일반적인 메인 플로우

• Browser의 동작 2

- Parsing-general

· 만약 2+3-1을 파싱해야 된다, 즉 이걸 해석해서 결과 값을 얻어야 될 경우 기본적인 파싱 방법은 먼저 2를 분리하고 그 다음에 + 연산자, 다음 3, - 연산자, 다음 1 이렇게 각각 분리해서 이것들이 가진 각각의 의미를 합쳐준다. 이것을 하나의 토큰이라고도 하는데 이런 것들을 기준으로 어떤 syntax tree를 만들고 그 트리에 따라 어떤 값의 처리가 일어나게 된다. 토큰 단위로 다 잘라서 의미를 해석한 다음에 의미에 따라서 어떤 실행을 해주는 것이라고 생각하면 된다.

- HTML Parser

· HTML 문법은 주로 꺽쇠 열고 HTML 태그를 쓰고 꺽쇠를 닫게 되어있다. 구조화되어 짜여있는 것을 마크업이라고 한다. HTML은 위와 같이 트리구조를 만들어서 브라우저에서 처리한다. 이것을 DOM 트리라고 표현한다.

- CSS parsing

· CSS 코드도 비슷하게 key와 vlaue로 된 구조로 이루어져있다.

· HTML과 CSS가 다른 점은 클래스가 존재하며, 브레이스({}) 괄호를 통해서 key와 value 값, 영역과 범위를 지정할 수 있다. 셀렉터와 선언부로 나누어져있다.

· 먼저 브레이스의 시작과 끝을 찾고 콜론을 찾아 어떤 key값과 value값을 매칭시켜주는 파싱 단계를 거치게된다.

• 생각해보기

Q1. 우리가 흔히 브라우저 탐색을 할 때 스크롤을 하거나, 어떤 것을 클릭하면서 화면의 위치를 바꿀 때, 브라우저는 어떻게 다시 화면을 그릴까? 위에서 표현된 그림처럼 다시 렌더링 되지 않을까?

A1. 흠.. 마우스나 키보드의 액션에 따라서 브라우저 파싱을 순간순간 다시하는 것이 아닐까?.. → 너무 비효율적일 것 같긴 하다.. cookie로 저장되었던 리소스를 다시 불러온다는 의견도 있고, reflow를 거쳐 다시 렌더 트리를 재생성하는 작업을 거친다는 의견도 있다.. 

• 참고 자료

- https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

- https://d2.naver.com/helloworld/59361