Browser rendering process

1. 브라우저의 주요 기능

• 사용자가 선택한 자원 (html 문서, pdf, 이미지 등)을 서버에 요청하고 브라우저에 표시하는 것
• 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정함
• 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시
  • 명세는 웹표준화 기구인 W3C(World Wide Web Consortium)에서 정함
• 브라우저의 일반적인 사용자 인터페이스 요소는 다음과 같음
  • URL를 입력할 수 있는 주소 표시 줄
  • 이전/다음 버튼
  • 북마크
  • 새로 고침 버튼, 현재 문서 로드 중단하는 정지 버튼
  • 홈 버튼

 

2, 브라우저의 기본 구조

• 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
  • 보여지는 페이지 이외에 사용자가 컨트롤 할 수 있는 부분
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
  • 사용자가 주소 표시줄에 uri를 입력했을 때 입력받은 uri값을 렌더링 엔진에 전달해주는 역할
  • 홈 버튼을 눌렀을 때 홈페이지로 가! 명령을 렌더링 엔진에게 전달하는 등의 전달자 역할
  • 자료를 찾기 위해 자료 저장소로 가는 것
• 렌더링 엔진: 요청한 콘텐츠를 브라우저에 표시
  • 예를 들어, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시
  • 사용자가 uri를 입력했을 때 uri에 해당하는 데이터를 통신, 자바스크립트 해석기, UI 백엔드에게 전달해줌. 전달하기 전에 파서를 통해 HTML, CSS를 파싱함. 이러한 총체적인 역할
• 통신: HTTP 요청과 같은 네트워크 호출에 사용. 플랫폼 독립적인 인터페이스로 각 플랫폼 하부에서 실행됨
  •  렌더링 엔진으로부터 HTTP 요청을 하라는 명령을 받음. 그래서 통신 layer에서 HTTP 요청을 서버에게 한 후 응답받은 데이터를 렌더링엔진에게 반환하는 역할
• UI 백엔드: 콤보 박스와 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
  • 최종적으로 렌더링 엔진에서 생성된 렌더 트리를 브라우저에 그리는 역할
• 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행
  • 브라우저가 렌더링하기 위해서는 HTML 태그와 CSS가 필요함. 자바스크립트는 이 HTML 태그를 동적으로 움직일 수 있도록 하는 역할.
  • 이 역할을 하는 자바스크립트를 파싱하는 것이 자바스크립트 해석기
• 자료 저장소: 자료 저장 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음. HTML5 명세에 브라우저가 지원하는 웹 데이터 베이스가 정의되어있음.

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지하며 각 탭은 독립적인 프로세스로 처리됨

 

렌더링 엔진들

• 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진 사용
• 사파리와 크롬은 웹킷(Webkit) 엔진 사용

3. 브라우저 렌더링 과정

사용자가 주소 표시줄에 uri를 입력한 다음 어떻게 브라우저에서 일이 발생할까?

 

1. 사용자가 사용자 인터페이스 중 하나인 주소 표시줄에 주소 입력
2. 입력하는 순간, 입력한 주소값을 브라우저 엔진에게 전달.
3. 브라우저 엔진은 입력받은 주소값에 해당하는 데이터를 먼저 자료 저장소에서 찾아봄
   • 사용자 인터페이스를 통해서 uri를 입력받았을 때마다 서버로 가서 해당하는 데이터를 받아오게 되면, 똑같은 데이터를 계속 서버로 부터 받아와야 하는 불필요한 네트워크 통신 발생
   • 낭비임. 계속 똑같은 데이터를 받으러 서버까지 다녀와야하기 때문
   • 이러한 낭비를 방지하기 위해, 자료 저장소에 자주 받아오는 데이터를 저장해두는 캐싱 기법을 사용해 효율적인 렌더링 구성
4. 만약에 자료 저장소에 해당 데이터가 있으면, 그것을 그대로 렌더링 엔진에게 전달.
   • 통신까지 가지 않아도 되므로 낭비 방지
5. 렌더링 엔진은 브라우저 엔진에서 가져온 자료(HTML, CSS, image 등)를 분석. 동시에 URI 데이터를 통신, 자바스크립트 해석기, UI 백엔드로 전파
6. 또한 렌더링 엔진은 통신 레이어에 URI에 대한 추가 데이터(있다면)를 요청하고 응답할 때 까지 기다림
   • 처음 데이터를 받아오는 것이라면, 서버로 가서 자료를 받아와야함.
   • 이런 경우 렌더링 엔진에게 사용자가 입력한 uri 값을 전달
   • 렌더링 엔진은 이 값을 통신 레이어에게 전달
   • 통신 레이어는 서버에 이 주소에 해당하는 데이터(HTML, CSS, 자바스크립트) 요청을 보냄. 서버는 uri에 해당하는 resource 응답. 응답받은 데이터를 다시 렌더링 엔진에게 줌
7. 응답 받은 데이터에서 HTML, CSS는 렌더링 엔진이 파싱
8. 응답 받은 데이터에서 Javascript는 Javascript 해석기가 파싱
9. Javascript 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 5번과 7번에서 파싱한 HTML의 결과인 DOM tree 조작
10.  조작이 완료된 DOM node(DOM tree 구성요소)는 render object(render tree 구성요소)로 변환. 해당 랜더 트리를 UI 백엔드에 전달.
11. UI 벡엔드는 render object를 브라우저 렌더링 화면에 띄어줌

 

 

참고

• d2.naver.com/helloworld/59361

• davidhwang.netlify.app/Developments/browser-rendering-process/

browser rendering process