web browser의 구조와 rendering engine

web과 web browser?

web은 인터넷에 연결된 정보 공간이다.

web browser는 web에 있는 HTML문서 등의 데이터들을 사용자가 볼 수 있고 상호작용 할 수 있도록 도와주는 소프트웨어이다. Google Chrome, Mozilla Firefox, Microsoft Edge, Safari 등이 있다. 사용자의 요청을 받아 web server와 통신할 때 URL과 HTTP를 사용하며, 요청의 결과인 HTML을 받아 사용자에게 보여준다

⇒ 웹 페이지(사이트)를 보여주거나 웹 서버와 통신하는 역할을 한다.

 

 

Web browser 구조

web browser구조 그림출처 https://web.dev/howbrowserswork/

 

 

Rendering engine

사용자가 화면을 보기까지의 간단한 과정을 설명해보면 web browser가 사용자의 요청을 입력받아 네트워킹으로 HTTP요청을 보낸다. 이후 서버는 HTTP메세지를 확인하고 응답 HTTP 메세지를 보내고 web browser는 받은 메세지를 해석하여 사용자에게 HTML페이지를 보여주게 된다.

여기에서 web browser의 rendering engine은 어떤 역할을 하는걸까. rendering engine은 서버의 응답 메세지를 파싱하고 사용자에게 보여줄 화면을 그리는 역할을 하게 된다.

렌더링 엔진의 main flow

HTML, CSS parsing ( DOM, CSSOM ) ⇒ build ( render tree ) ⇒ layout ⇒ paint

네트워킹 프로세스에서 응답받은 HTML과 CSS를 렌더링 엔진에서 파싱하여 DOM과 CSSOM으로 구성한다. 이후 DOM과 CSSOM을 엮어 render tree를 생성하여 각 요소에 style을 입힌다. Layout과정을 거쳐 화면에 각 요소의 배치를 하고 마지막 Paint과정에서 실제 화면에 픽셀로 표현한다. 각각의 과정을 조금 더 살펴보자.

HTML, CSS parsing ( DOM, CSSOM )

HTML, CSS를 파싱해 DOM 트리, CSSOM 트리 구축

• DOM트리 구축 ( DOM은 웹페이지를 브라우저가 이해할 수 있는 구조로 변환한 결과물이다. )
• HTML, CSS의 파싱은 ⇒ 토큰화 + 트리 구축 알고리즘을 통해 이루어진다
  • 웹페이지는 서버에서 html문서를 바이트 형태로 받아옵니다.
  • 응답받은 데이터는 meta태그에 지정된 인코딩 방식(UTF-8)에 따라 문자열로 변환된다.
  • 문자열로 변환된 html문서는 문법적인 최소 단위인 토큰으로 분해하고
  < 트리구축 : 토큰 → 객체로 변환 → 노드 생성, DOM 구축 >
  • 각 토큰은 객체로 변환해 노드를 생성
  • 노드는 DOM을 구성하는 기본 요소가 된다. 부자 관계를 반영 트리 자료구조로 구성.
• < 토큰화 : 서버 응답 결과( byte ), utf-8 인코딩→문자열 변환, 토큰 생성 >

  

  https://web.dev/howbrowserswork/#parser-lexer-combination*

 

script의 parsing

javascript 등의 script태그도 각 엔진( js-v8 )에 따라 파싱이 실행된다. HTML을 파싱하면서 <script>태그를 만나게 되면 HTML파싱은 중지되고 <script>가 파싱된다. HTML파싱 사이에 script태그가 많을 경우에, 파싱 속도가 느려지게 된다.

또한 <script>는 파싱과 실행이 동시에 이루어지기 때문에 HTML의 파싱이 완성되지 않은 상태에서 <script>태그에서 Javascript가 DOM을 수정하게 되는 경우가 발생할 수 있다. 이런 경우가 렌더링 시 문제를 발생시킨다.

script를 파싱하는 경우에는

• <script>를 파싱하게 되는 경우, <script>태그를 HTML의 가장 마지막에 작성하여 HTML파싱이 끝난 후에 script태그를 파싱, 실행시키는 방법이 있다
• defer / async 속성 사용하여 비동기적으로 script를 parsing할 수 있다.
  • defer script태그의 로딩은 비동기적으로 HTML의 파싱과 함께 이루어진다. 그리고 script의 실행은HTML파싱이 완료된 직후에 실행된다.
  • async script태그의 로딩은 defer와 마찬가지로 HTML과 파싱과 함께 이루어진다. defer와 다른 점은 script의 로딩이 끝나면 HTML파일이 중단되고 script를 실행하게 된다.
• <script async src="extern.js"></script> <script defer src="extern.js"></script>

build 렌더트리 구축 ( render tree )

HTML와 CSS의 parsing이 끝났으면 이 둘의 DOM과 CSSOM을 결합하여 렌더트리를 생성한다.

Layout 레이아웃 과정 ( = Reflow )

랜더 트리의 노드들을 화면에 배치한다 → 초기 배치 이후 수정작업 : reflow

레이아웃 성능은 DOM의 영향을 받습니다. 노드 수가 많을수록 레이아웃이 더 오래 걸립니다.

Paint 랜더 트리 그리기 ( Repaint )

렌더 트리의 노드를 화면의 실제 픽셀로 변환해준다