[부스트코스] 웹 프로그래밍 기초, 3) Browser의 동작

sameul__choi·2020년 2월 1일
1

반가워요, 벌써 세 번째 포스팅입니다 ! 잠시 부스트코스 강사님들의 강의에 대해 개인적인 사견을 붙여보겠습니다. 부스트코스의 강의는 굉장히 알기 쉽게 설명해주시는 것과 동시에 알아야 할 것 들만 콕콕 찝어주는 기본에 충실한 강의라고 생각합니다. 덕분에 쉽고 재밌게 많은 것들을 알아가고 있습니다. 웹 프로그래밍 기초에 대해서 배우고 싶은 분이라면 edwith 부스트코스에 오셔서 무료로 인강을 수강해보세요 !


1. 웹 프로그래밍 기초

3) Browser의 동작


이 포스트에서는 웹 Browser가 어떻게 동작하는 지 알아보겠습니다. 웹을 통해서 전달되는 데이터는 해석이 되어야 합니다. 서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳 'Browser'에 어떻게 도착을 하는 지에 대해서 잠깐 생각해 보겠습니다 !

Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링 엔진이 포함 되어있습니다. 이런 작업의 대부분은 브라우저 내부에서 이루어 지기 때문에 꼭 알아야 하는 것은 아닙니다. 그렇지만 브라우저의 내부 동작 원리를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제들을 해결할 수 있고, 보다 최적화된 웹 개발을 할 수 있게됩니다 ! 자 그럼 시작하겠습니다.


브라우저의 동작 ?

우리는 브라우저(chrome, safari, internet explorer)를 통해 인터넷에 접속합니다. 이러한 브라우저들이 어떻게 동작하는 것일까요?

사실 브라우저의 동작에 대해서 개발자들 조차 많은 관심을 갖지는 않았었는데요, 최근 브라우저의 동작에 대해서 많은 궁금함을 갖게 되었습니다. 그렇게 된 계기는 브라우저의 동작에 대해서 숨겨져 있고, 개발자가 어떤 내용이 보여지는 것을 기대하고 개발을 했을 때 브라우저가 그것을 제대로 이해하지 못하여 원하지 않았던 결과물이 나올 때가 있기 때문입니다. 조금 더 소스코드가 빨리 실행되게 하려면 어떻게 해야할까? 와 같은 생각도 브라우저에 대해 관심을 높이게 되었습니다 !

6~7년 전 부터 브라우저의 동작 원리에 대해서 소개가 되기 시작했습니다.

그 중 잘 정리가 되어 있는 블로그 글인 'How Browsers Work: Behind the scenes of modern web browers'라는 글을 같이 보시면 좋겠습니다 !

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


Browser Components

크게 User Interface, Browser Engine, Rendering Engine으로 이루어 져 있고, 통신모듈, 자바스크립트 코드를 해석해주는 모듈, 그리고 UI 부분의 백엔드를 처리해주는 백엔드 모듈이 있습니다.


Rendering Engine?

파이어폭스의 Gecko, 사파리의 Webkit, 크롬의 Chromium 등을 말하는데요, 말 그대로 요청된 컨텐츠를 브라우저 스크린에 display 해주는 녀석입니다.

이 녀석의 Main flow를 보면

1) 우선 돔트리를 구성하기 위해 HTML코드를 파싱합니다.
2) 그 후에 Render tree를 만들고,
3) Render tree의 레이아웃을 짠 뒤에,
4) 화면에 painting 해줍니다.

조금 더 자세히 보기 위해, Webkit의 main flow를 가져와 보았습니다. 참고가 되셨으면 좋겠습니다 :)

  • 파싱은 토큰 단위로 잘라서 의미를 해석한 다음 의미에 따라서 실행을 해주는 것이라고 생각하시면 됩니다 !

css parsing 그림 정리

css style sheet 라는 최상위 오브젝트 아래, rule들이 있고, 그 다음에 selector(좌)와 Declaration(우)들이 있습니다. 이러한 객체화된 트리구조로 css를 가지게 됩니다. 간단하게 css 파싱에 대해 알아 보았습니다.


여기까지 웹 브라우저 동작에 대해서 알아보았습니다. 감사합니다 !

출처 https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

0개의 댓글