Subscribe

Minkyung Lee

📍 Berlin

Browser Anatomy - Networking

브라우저의 작동 원리를 네트워크의 관점에서 살펴보자. Rendering Engine이나 JavaScript Interpretor와 같은 브라우저 구성 요소들이 HTML, CSS, JavaScript 파일을 분석해 화면에 그려주려면 먼저 네트워크 통신을 통해 HTML, CSS, JavaScript 파일들, 그 외 이미지 파일과 같이 웹사이트를 구성하는 리소스들을 서버에 요청해 받아와야한다. 예를 들어 주소창에 http://abc-company.com을 입력했다고 가정하고 네트워크 요청-응답

Browser Anatomy - Rendering Engine

렌더링 엔진의 관점에서, 그러니까 우리가 보는 화면에 HTML, CSS, JavaScript 코드가 시각화되는 관점에서 브라우저의 동작을 살펴보도록하자. 렌더링 엔진이 작동하는 방식은 대략 다음과 같이 도식화할 수 있다. 첨부된 이미지는 여러 렌더링 엔진들 가운데서 WebKit의 도식을 보여주고 있는데, WebKit이 아니라 다른 렌더링도 용어의 차이는 있으나 큰 틀의 작동방식은 동일하다. 각각의 단계가 무엇을

Browser Anatomy

우리가 크롬을 켜고 주소창에 youtube.com만 치면 온갖 비디오를 원없이 감상할 수 있는 것은 어떻게 가능할까? 바로 브라우저가 저 멀리 사막 한가운데에 있는 서버에서 youtube.com을 구성하는데 필요한 리소스들을 요청하고 받아와서 브라우저 창에 띄워주는 일을 하기 때문이다. 브라우저의 구성 요소를 각각 살펴보면서 이 일이 어떻게 가능한지 한번 알아보자. User Interface