NAVER D2 정리/Web (4) 썸네일형 리스트형 최신 브라우저의 내부 살펴보기 4 - 컴포지터가 사용자 입력을 받았을 때 원문 작성일: 2019.04.30 원문: https://d2.naver.com/helloworld/6204533 컴포지터가 사용자 입력을 받았을 때 이 글에서는 사용자 입력(input)을 받았을 때 컴포지터가 어떻게 부드러운 상호작용이 이루어지게 하는지 알아보겠다. 브라우저 관점에서 입력 이벤트 '입력 이벤트(input event)'라는 말을 들었을 때 입력란에서 일어나는 값 입력이나 마우스 클릭만 생각할 수 있다. 하지만 브라우저의 관점에서 입력이란 모든 사용자의 제스처를 의미한다. 마우스 휠을 스크롤하는 것, 화면을 터치하거나 마우스 포인터를 화면 위에 올리는 것도 입력 이벤트이다. 사용자 제스처가 발생했을 때 가장 먼저 제스처를 수신하는 것은 브라우저 프로세스이다. 브라우저 프로세스는 제스처가 어디.. 최신 브라우저의 내부 살펴보기3 - 렌더러 프로세스의 내부 동작 원문 작성일: 2019.04.22 원문: https://d2.naver.com/helloworld/5237120 이 글에서는 렌더러 프로세스가 HTML 문서를 받았을 때 어떤 절차를 거쳐 화면을 구성하는지 설명합니다. 이 과정을 효율적으로 처리하기 위해 렌더러 프로세스가 어떤 아키텍처를 가지고 있는지 살펴보고, 웹 개발자가 고려하면 좋을 내용을 소개합니다. 렌더러 프로세스는 웹 콘텐츠를 처리한다 렌더러 프로세스는 탭 내부에서 발생하는 모든 작업을 담당한다. 렌더러 프로세스의 메인 스레드가 브라우저로 전송된 대부분의 코드를 처리한다. 간혹 웹 워커나 서비스 워커를 사용하는 경우에는 워커 스레드가 JavaScript 코드의 일부를 처리한다. 웹 페이지를 효율적이고 부드럽게 렌더링하기 위해 별도의 컴포지터 스.. 최신 브라우저의 내부 살펴보기2 - 내비게이션 과정에서 일어나는 일 원문 작성일: 2019.03.26 원문: https://d2.naver.com/helloworld/9274593 내비게이션 과정에서 일어나는 일 이 글에서는 웹 사이트를 표시하기 위해 각 프로세스와 스레드가 어떻게 통신하는지 좀 더 깊게 알아본다. 브라우저의 주소 표시줄에 URL을 입력하면 브라우저가 인터넷에서 데이터를 가져와서 페이지를 표시한다. 간단한 이 동작에서 사용자가 사이트를 요청하고 브라우저가 페이지 렌더링을 준비하는 과정(이 글에서는 이 과정을 '내비게이션'이라고 하겠다)에 초점을 맞춰 살펴보겠다. (역주: '내비게이션'을 (사이트 간의)이동'이라 생각하면 이 글을 이해하기 좀 더 쉬울 것이다) 브라우저 프로세스에서 시작한다 브라우저 프로세스에는 UI 스레드와 네트워크 스레드, 스토리지 스레.. 최신 브라우저의 내부 살펴보기1 - CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처 원문 작성일: 2019.03.26 원문: https://d2.naver.com/helloworld/2922312 브라우저 아키텍처 브라우저는 스레드를 많이 사용하는 프로세스 하나만 사용할 수도 있고, 스레드를 조금만 사용하는 프로세스를 여러 개 만들어 IPC(Inter Process Communication, 프로세스 간 통신)로 통신할 수도 있다. 여기에서 주목해야 할 중요한 점은 이러한 서로 다른 아키텍처가 구현 세부 사항이라는 점이다. 브라우저를 만드는 방법에 대한 표준은 없다. 브라우저마다 접근 방식이 완전히 다를 수 있다. 이 시리즈에서는 다음 그림에 표현된 Chrome의 최근 아키텍처를 살펴본다. 제일 위에 있는 브라우저 프로세스는 애플리케이션의 각 부분을 맡고 있는 다른 프로세스를 조정한다... 이전 1 다음
