How-Browsers-Work-D2

📚 NAVER D2의 브라우저는 어떻게 동작하는가?

이 글은 브라우저는 어떻게 동작하는가?를 한국어로 요약한 정리 글입니다. 공부 목적으로 요약한 주관적인 내용입니다. 😀

브라우저의 주요 기능

• 유저가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
• 자원은 보통 HTML 문서이고 떄로는 PDF, 이미지, 기타 등등일 수 있다.
• 브라우저는 웹 표준화 기구인 W3C에서 정한 명세에 따라 HTML, CSS를 해석하여 표시한다.

브라우저의 기본 구조

브라우저의 주요 구성 요소

• 사용자 인터페이스(UI): 주소 표시줄, 이전/다음 버튼 등 요청 페이지를 보여주는 창을 제외한 나머지 부분

• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작 제어

• 렌더링 엔진: 요청한 콘텐츠를 표시.(HTML 요청시 HTML과 CSS를 파싱하여 화면에 표시)

• 통신: HTTP 요청과 같은 네트워크 호출에 사용됨.

• UI 백엔드: select/input 등의 기본적인 위젯을 그린다. OS UI를 사용

• 자바스크립트 해석기: 자바스크립트 코드를 해석/실행

• 자료 저장소: 자료를 저장하는 계층.

• (추가) 크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 즉, 각 탭은 독립된 프로세스로 처리된다.

렌더링 엔진

• 크롬의 경우는 웹킷(Webkit) 엔진을 사용한다.

  • 웹킷은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진이다.(사파리도 웹킷을 변형해서 사용한다.)

• 동작 과정: HTML 파싱 -> 렌더 트리 구축 -> 레이아웃 -> 페인트

  • 파싱을 통해 DOM 노드 트리로 변환한다. 다음 스타일 요소들도 CSSOM으로 변환한다. 이후 이 둘을 통해 렌더 트리를 생성한다.
  • 모든 과정들이 점진적으로 진행된다. 좀더 나은 UX를 위해서 가능하면 빠르게 표시하며 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.
  • 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.
  • 크롬에서는 페인트 다음 각 레이어를 나눠서 합성하는 합성(composite) 단계가 있다.

파싱과 DOM 트리 구축

• 작성 예정

회고

참고

• NAVER D2 - 브라우저는 어떻게 동작하는가?
• website는 어떻게 보여주게 될까?