브라우저 렌더링

렌더링이란?

HTML, CSS, JavaScript 등 개발자가 작성한 문서를 *브라우저에서 그래픽 형태로 출력하는 과정을 말한다.

대부분의 브라우저는 렌더링을 하는 렌더링 엔진을 가지고 있다. 

• 크롬 : 블링크(Blink)
• 사파리 : 웹킷(Webkit)
• 파이어폭스 : 게코(Gecko)

 

*브라우저

• 월드 와이드 웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어
• 주요 역할 
  • 사용자가 입력한 웹페이지, 이미지, 동영상 등의 자원을 서버에게 요청
  • 서버로부터 전달 받은 자원을 화면에 출력

HTML, CSS는 브라우저에서 렌더링 하는데 있어서 필요한 전부다.
그렇다면 자바스크립트는?
자바스크립트는 HTML 태그를 동적으로 움직이게 만들어 주는 역할을 하는 프로그래밍 언어다.

 

브라우저 구성 요소(Browser Elements)

 

 

• 사용자 인터페이스(User Interface)
  - 요청한 페이지를 보여주는 창 이외에 사용자가 컨트롤 할 수 있는 부분
  - 주소표시줄, 홈버튼, 새로고침/정지 버튼, 이전/다음 버튼 등
  
  
• 브라우저 엔진(Browser Engine)
  - 사용자 인터페이스와 렌더링 엔진 사이에 동작 제어(중간에서 명령 전달), 자료 저장소에 접근
  - 사용자가 주소 표시줄에 URI를 입력했을 때, 그 URI를 렌더링 엔진에게 전달한다.
  - 하지만, 가장 먼저 자료 저장소에서 URI에 해당하는 자료를 찾아본다. 해당 자료가 쿠키에 저장되어 있다면 그 자료를 렌더링 엔진에게 전달한다.
  * 항상 사용자 인터페이스를 통해서 URI를 입력 받았을 때마다 서버로 가서 해당 데이터를 받아온다면 똑같은 데이터를 계속 서버로부터 받아와야하는 불필요한 통신이 발생한다고 볼 수 있다. 이러한 낭비를 방지하기 위해서 자주 받아오는 데이터들을 자료저장소에 저장해두고 사용한다(*캐싱). 캐싱을 사용해 효율적인 렌더링을 구성할 수 있다.
  - 그 외에 홈버튼, 새로고침/정지 버튼, 이전/다음 버튼 등을 클릭했을 때, 그에 맞는 명령을 렌더링 엔진에게 전달
  
  
• 자료 저장소(Data Storage)
  - Cookie, Local Storage, Indexed DB 등의 자료를 (HTML5부터는)Web Database에 저장
  
  
• 렌더링 엔진(Rendering Engine)
  - 요청한 URI를 브라우저 엔진에게 받아서 server에 요청(통신) -> server로부터 URI에 해당하는 데이터들(HTML, CSS, JavaScript 등)을 받아서 *파싱한 후 렌더링한다.
  - 통신을 통해 받은 데이터 중 자바스크립트는 자바스크립트 엔진으로 보낸다.
  
  
• 통신(Networking)
  - 렌더링 엔진으로부터 전달 받은 URI 주소값을 통해 URI에 해당하는 데이터를 서버에 요청하고, 응답 받은 데이터를 렌더링 엔진에게 반환(*OS 단에서 실행???).
  - http 요청과 같은 네트워크 호출???
  
  

*운영 체제(Operating System, OS)(따로 블로그에 정리하기)

  - 사용자가 컴퓨터를 쉽게 다룰 수 있게 해주는 인터페이스

  - 하드웨어와 스프트웨어를 관리하는 소프트웨어 전체

  - 목적 : 컴퓨터 하드웨어 관리 / 사용자에게 편의를 제공

  - 운영 체제를 사용하는 가장 주된 목적은 컴퓨터의 하드웨어를 관리하는 것이다. 컴퓨터에는 수많은 하드웨어가 존재한다. CPU, 메모리, 디스크, 키보드, 마우스, 모니터, 네트워크 등이 있으며 이를 잘 관리해주어야 컴퓨터를 효율적으로 사용할 수 있다. 운영 체제의 성능이 좋을수록 컴퓨터의 성능 역시 좋아진다고 할 수 있다.

  - 또한, 운영 체제는 사용자에게 편의를 제공하려는 목적을 가지고 있다. 운영체제가 없다면 위에서 말한 하드웨어에 관한 모든 관리를 사용자가 해야한다는 점과 같이 컴퓨터를 사용하는데 매우 불편함을 겪을 것이다. 

  - 대표적인 운영 체제 : Windows, Linux, Mac OSX, iOS 등

  - 정리 : 운영체제는 하드웨어를 제어하고 컴퓨터 자원을 관리하며, 컴퓨터 사용을 편리하게 해주고 응용 프로그램들의 수행을 도와주며, 사용자와 하드웨어 사이의 매개체 역할을 하는 소프트웨어

 

운영체제의 구성요소 : 프로세스 관리자, 주기억장치 관리자, 파일관리자, 장치관리자

 

• 프로세스: 실행중인 프로그램, 주기억장치에 저장된 프로그램, PCB(Process Control Block)와 결합된 형태의 코드를 말하는데, PCB란 프로세스가 작업 도중 필요한 정보나 스케줄에 필요한 여러 가지 정보를 기억하고 있는 구조체이다. 작업 스케줄러(job scheduler)에 의해서 생성되어 주기억장치에 진입한다.(따로 블로그에 정리하기)

• 스레드(thread): 프로세스는 실행 환경부분과 제어부분의 두 부분으로 나눌 수 있는데 스레드란 프로세스의 제어부분만을 말한다. 스레드는 실행에 필요한 최소한의 정보만 가지고 자신에 속해 있는 프로세스의 기억장치나 파일과 같은 실행환경을 다른 스레드와 공유하여 프로세스의 생성과 문맥교환 등의 오버헤드를 줄여 운영체제의 성능을 개선할 수 있게 된다.(따로 블로그에 정리하기)

 

• 자바스크립트 엔진(JavaScript Engine)
  - 자바스크립트 코드를 해석하고 실행한다(자바스크립트를 파싱한다).
  - chrome에서는 V8이라는 자바스크립트 엔진을 사용해 자바스크립트를 파싱한다.
  - 위 언급대로 자바스크립트는 HTML 태그를 동적으로 움직일 수 있도록 하는 역할만을 담당하는데, 그 역할을 하는 자바스크립트를 파싱하는 것이 자바스크립트 해석기다.
  
  
• UI 백엔드(UI Backend)
  - 최종적으로 렌더링 엔진에서 생성된 render tree(렌더 트리)를 브라우저에 그리는 역할

*파싱(Parsing)이란?

  - 언어학 : 구문 분석. 문장을 그것을 이루고 있는 구성 성분으로 분해하고 그들 사이의 위계 관계를 분석하여 문장 구조를 결정하는 것

  - 컴퓨터 과학 : 일련의 문자열을 의미있는 token(어휘 분석의 단위)으로 분해하고 그것들로 이루어진 Parse Tree를 만드는 과정

  - 서버로부터 전송받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정

  - 파싱 결과는 문서 구조를 나타내는 노드 트리인데, 파싱 트리(parse tree) or 문법 트리(syntax tree)라고 한다.

 

렌더링 엔진 동작 과정(Rendering Engine Working Process)

 

<Webkit 엔진의 렌더링 동작 과정>

 

1. DOM(Document Object Model), CSSOM(CSS Object Model) 트리 생성

• DOM과 CSSOM은 서로 독립적인 데이터 구조이다.

1-1. HTML을 parsing하여 DOM 트리 생성

• 먼저 HTML 문서(마크업)를 파싱하여 DOM 노드들을 만든 후 병합하여 DOM 트리를 만든다.
• DOM으로 변환된 HTML은 자바스크립트가 조작할 수 있는 상태가 된다.
• 아래는 DOM 트리를 파싱하는 좀 더 자세한 과정이다.

  1) 변환(Conversion) : HTML의 원시 바이트를 읽어와 해당 파일에 지정된 인코딩(UTF-8 등)에 따라 문자열로 변환하는 과정이다.

  2) 토큰화(Tokenizing) : 문자열을 HTML5 표준에 따라 고유 토큰으로 변환한다. 각 토큰은 특별한 의미와 고유한 규칙을 가진다.

  3) 렉싱(Lexing) : 토큰을 해당 속성 및 규칙을 정의한 객체(Nodes)로 변환한다.

  4) DOM 생성(DOM Construction) : 노드들을 트리 구조로 변환한다. HTML은 상위-하위 관계로 정의할 수 있기에 트리 구조로 나타낼 수 있다.

 

1-2. CSS(Style Sheets)를 parsing하여 CSSOM 트리(Style Rules)생성

• 브라우저는 DOM을 생성하는 동안 외부 CSS를 참조하는 <link> 태그를 만나게 되면 브라우저에 리소스를 요청한다.
• CSS의 원시 바이트(raw bytes)가 문자열로 변환되고, 토큰을 식별한 후 노드로 변환되어 CSSOM이라는 트리 구조를 빌드한다.
• CSS 파싱은 CSS 특성상 자식 노드들이 부모 노드의 특성을 계속해서 이어받는(cascading) 규칙이 추가된다는 것을 빼고는 HTML파싱과 동일하게 이루어진다.
• CSSOM 트리 생성이 완료되어야 비로소 이후의 Rendering(render tree) 과정을 시작할 수 있다. 그래서 CSS는 rendering의 blocking 요소라고 한다.

 

<CSSOM 트리>

 

 

2. 렌더 트리 구축

• DOM 및 CSSOM 트리를 결합하여 렌더링 트리를 형성하는데, 이 과정을 attachment라고 부른다.
• DOM 트리를 생성하는 동시에, 이미 생성된 DOM 트리와 CSSOM을 attachment 한다.
• DOM 트리를 구성하는 하나의 DOM noed에는 attach라는 메서드를 가진다. DOM 트리에 새로운 DOM node가 추가되면 attach 메서드가 호출되어 render 트리의 구성요소인 render object를 생성한다.
  - DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다. 
• 렌더 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함하기에 모든 DOM node가 전부 render object로 생성되지 않는다.
  - <head> 요소와 같은 비시각적 DOM 요소 or display 속성에 "none" 값이 할당된 요소는 렌더 트리에 추가되지 않는다.
  - visibility 속성에 "hidden" 값이 할당된 요소는 렌더 트리에 추가된다.
• <html>과 <body> DOM node 또한 render object로 구성되는데 이들은 render tree root로써 render view라고 부른다.
• 나머지 DOM node들은 render object로 생성되어 render tree root에 추가된다.
• 후에 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고, 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리된다.

 

3. 렌더 트리 배치(Layout, Reflow)

• 각 노드가 화면에 정확한 위치에 표시되기 위해 객체의 위치와 크기를 계산하는 과정
• 배치는 <html> 요소에 해당하는 최상위 render object에서 시작하고, 화면에 왼쪽 위부터 render object에 해당하는 DOM node를 그려나간다.

 

4. 렌더 트리 그리기(Paint)

• 계산된 위치와 크기 등의 스타일들을 실제 픽셀로 표현하는 그리기
• Render Layer가 2개 이상이라면 각각의 Layer를 paint한 뒤 하나의 이미지로 Composite하는 과정을 추가로 거친 뒤 실제 화면에 그려진다.

위 1번과 2, 3, 4번은 병력적으로 진행된다??

-> 통신 레이어에서 데이터를 받아오는 동시에, 받아온 HTML, CSS, JS를 파싱하면소 곧바로 render tree에 그리게 된다.

 

요약

1. HTML 마크업을 처리하고 DOM 트리 빌드(DOM 파싱)
2. CSS 마크업을 처리하고 CSSOM 트리 빌드(CSS 파싱)
3. DOM 및 CSSOM을 결합하여 렌더 트리 형성(Attachment)
4. 렌더 트리에서 레이아웃을 실행하여 각 노드의 형태(크기, 위치 등) 계산(Layout)
5. 개별 노드를 화면에 페인트(Painting)

위의 5단계를 걸쳐 브라우저는 화면에 렌더링한다.

 

주소창에 네이버 주소를 입력했을 경우 아래와 같은 과정을 거친다.

1. 주소창에 네이버 입력
2. 네이버 서버로 찾아간다.
3. *DNS가 연결해줄 곳을 찾음
4. 서버에서 HTML 파일을 클라이언트로 보냄.
5. HTML 파일 파싱 및 DOM Tree 생성
6. link 태그를 만나 css 파싱 및 CSSOM 트리 생성
7. DOM , CSSOM 합쳐 Render Tree 생성
   (8. JavaScript를 만나면? HTML파서는 JS 코드를 실행하기 위해 파싱 중단
8. JS 엔진실행 및 JS코드 파싱)

*DNS(Domain Name System) : 브라우저가 인터넷 자원을 로드할 수 있도록 도메인 이름을 IP 주소로 변환한다.

 

참고

• https://beomy.github.io/tech/browser/browser-rendering/
• https://www.youtube.com/watch?v=tJieVCgGzhs&t=888s/