[번역] 브라우저 동작 원리 - behind the scenes

njh7799·2020년 6월 25일
0

이 글은 Ohans Emmanuel 의 How browser rendering works — behind the scenes을 번역한 글이다. 브라우저 동작 원리에 대한 글을 몇 십 개를 보았지만 이 글 만큼 잘 설명된 글이 없었다. 기본적인 영어가 된다면 원문을 읽는 것을 추천하겠다.

이 글의 목적은 브라우저가 HTML, CSS, JavaScript를 상호작용이 가능한 웹사이트로 변환시키는 과정을 설명하는 것이다. 브라우저가 웹 사이트를 동작 시키는 과정을 이해하면 웹 애플리케이션을 최적화하여 속도와 성능을 높일 수 있게 될 것이다.

준비가됐으면 시작하자.

서론

브라우저는 정확히 어떻게 웹사이트를 렌더링하는가? 나는 그 과정을 곧 분석할 것이다. 하지만 우선, 기본적인 것들을 재점검하는 것이 중요하다.

웹 브라우저는 원격 서버(또는 로컬 디스크)에서 파일을 로드하여 사용자에게 화면을 보여주는 소프트웨어로서 사용자 상호작용이 가능하다. 물론 나는 네가 브라우저가 무엇인지 안다는 것은 알고 있다.🙂

어쨌든 브라우저에는 수신한 파일을 기반으로 사용자에게 표시할 내용을 알아내는 소프트웨어가 있다. 이것을 브라우저 엔진이라고 한다.

브라우저 엔진은 브라우저의 핵심 소프트웨어로, 각기 다른 브라우저 제조업체들이 그들의 엔진을 다른 이름으로 부른다. 파이어폭스용 브라우저 엔진은 Gecko, 크롬의 엔진은 Blink라고 불린다.(Blink는 Webkit을 바탕으로 만들어졌다.)

만약 브라우저 엔진에 관심이 있다면 여기에서 브라우저 엔진들을 비교해볼 수 있다. 브라우저 엔진의 이름에 집착하지는 말자. 그냥 단순히 호칭일 뿐이다.

설명의 편의성을 위해 우리가 범용 브라우저 엔진을 가지고 있다고 가정하자. 이 브라우저 엔진은 아래와 같은 그림으로 표현될 것이다.

이 글에서 나는 "브라우저"와 "브라우저 엔진"을 번갈아 사용할 것이다. 호칭에 집착하지 말자. 중요한 것은 브라우저 엔진이 이 글의 핵심 소프트웨어라는 것을 알고 있다는 것이다.

데이터의 송수신

이 글은 컴퓨터 네트워크에 대한 글은 아니지만, 데이터가 바이트 단위로 패킷으로 인터넷을 통해 전송된다는 것 정도는 알고가자.

컴퓨터: “Send me bytes of data!”

내가 말의 요점은 HTML, CSS, JS를 쓰고 브라우저에서 HTML 파일을 열려고 하면 브라우저가 하드 디스크(또는 네트워크)에서 HTML의 원시 바이트(* 0010101010 처럼 되어있는 데이터)를 읽게 된다는 것이다.

컴퓨터가 raw data를 수신한다.

<이하 작성중>

0개의 댓글