브라우저 렌더링(Browser Rendering)
브라우저 렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말합니다. 즉, 클라이언트(사용자)에서 서버로부터 여러 파일을 받아 브라우저에 나타내는 과정을 말합니다.
렌더링 엔진
렌더링 엔진은 HTML과 CSS를 파싱하여 화면에 표시하는 역할을 합니다. 렌더링 엔진은 브라우저마다 사용하는 렌더링 엔진이 각각 다르기 때문에, 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않고 엔진마다 읽을 수 있는 코드의 버전도 다릅니다.
렌더링 엔진 동작 과정
- 렌더링 엔진은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 만들고 CSS 문서를 파싱하여 CSSOM(CSS Object Model) 트리를 만듭니다.
- DOM과 CSSOM을 이용하여 렌더 트리를 만듭니다.
- 렌더 트리 생성이 끝나면 렌더 트리의 배치가(Layout, Reflow라고 부름) 시작됩니다. 이 과정은 각 노드가 화면의 정확한 위치에 표시하기 위해 위치와 크기를 계산하는 과정을 말합니다.
- 마지막으로 계산된 위치와 크기 등의 스타일들을 실제 픽셀로 표현하는 그리기 과정이 시작됩니다. 이 과정을 Paint라고 합니다.
렌더링 엔진 상세 동작 과정
위 그림은 Webkit 엔진의 렌더링 동작 과정입니다.
- HTML을 파싱하여 DOM 노드들을 만든 후 병합하여 DOM 트리를 만듭니다.
- CSS를 파싱하여, CSSOM 트리(Style Rules)를 만듭니다.
- DOM 트리와 CSSOM 트리를 사용하여, Attachment라는 과정을 통해 Render Tree를 생성합니다.
- Render Tree를 배치(Layout)합니다.
- Render 트리를 화면에 그립니다(Painting).
이제 동작 과정에서의 주요 처리 기능인 Parser, Attachment, Layout, Painting에 관해 알아보겠습니다.
Parser
파싱은 서버로부터 전송받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정을 파싱이라고 합니다. 파싱 결과는 문서 구조를 나타내는 노드 트리인데, 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 합니다.
DOM(Document Object Model) 트리 생성
- 변환(Conversion) : HTML의 원시 바이트(raw Bytes)를 읽어와 해당 파일에 지정된 인코딩(UTF-8 등)에 따라 문자열로 변환하는 과정입니다.
- 토큰화(Tokenizing) : 문자열을 W3C HTML5 표준에 따라 고유 토큰(<html>, <body> 등 꺽쇠괄호로 묶인 문자열)으로 변환합니다. 각 토큰은 특별한 의미와 고유한 규칙을 가집니다.
- 렉싱(Lexing) : 토큰을 해당 속성 및 규칙을 정의한 객체(Nodes)로 변환합니다.
- DOM 생성(DOM construction) : HTML은 상위-하위 관계로 정의할 수 있어, 트리 구조로 나타낼 수 있습니다. 렉싱 과정을 거쳐 생성된 노드들을 트리구조로 변환합니다.
위의 4가지 과정을 모두 거치면 그림과 같은 트리 형태의 DOM이 만들어집니다. 브라우저는 이후 모든 페이지 처리를 이 DOM을 사용합니다.
CSSOM(CSS Object Model) 트리 생성
위의 그림과 같이 DOM을 생성하는 과정 그대로 CSSOM을 생성합니다.
브라우저는 DOM을 생성하는 동안 외부 CSS를 참조하는 <link> 태그를 만나게 되면 브라우저에 리소스를 요청합니다. CSS의 원시 바이트(raw bytes)가 문자열로 변환된 후 차례로 토큰과 노드로 변환되고 마지막으로 CSSOM(CSS Object Model)이라는 트리 구조를 만듭니다.
CSSOM이 트리구조를 가지는 이유는 하향식으로 규칙을 적용하기 때문입니다. 최종 스타일을 계산할 때 브라우저는 해당 노드에 적용 가능한 가장 일반적인 규칙으로 시작해 더 구체적인 규칙을 적용하는 방식입니다.
위의 CSSOM 트리 그림을 보시면 하향식 규칙 적용을 좀 더 쉽게 이해할 수 있습니다. <body> 태그 내에 있 <span> 태그 안에 포함된 텍스트의 크기는 16px이고 색상은 빨간색입니다. 하지만 <span> 태그가 <p> 태그의 하위인 경우 해당 콘텐츠는 표시되지 않습니다.
Javascript & CSS
HTML과 CSS, Javascript를 파싱하여 렌더 트리를 형성하고 화면에 그리는 과정을 최적화하면 브라우저의 렌더링 속도를 높여 사용성을 개선할 수 있습니다. Javascript와 CSS가 렌더링 과정에 어떤 영향을 미치는지 살펴보도록 하겠습니다.
Javascript
자바스크립트는 파서 차단 리소스(parser blocking resource)입니다. 브라우저는 문서를 파싱하다가 자바스크립트를 만나면 진행하던 파싱을 중지하고 자바스크립트 엔진에게 권한을 넘겨 자바스크립트를 파싱하고 실행합니다.
자바스크립트가 실행되는 동안 문서의 파싱은 중단됩니다. 자바스크립트는 파싱을 중단시키기 때문에 보통 자바스크립트를 <head> 태그가 아닌 <body> 태그가 닫히기 바로 전에 사용되도록 하는것이 좋습니다.
<script> 태그에 defer 속성을 주면 문서 파싱은 중단되지 않고 문서 파싱이 완료된 이후에 자바스크립트가 실행됩니다. HTML5에서 스크립트를 비동기(async)로 처리하는 속성이 추가되었습니다. 자바스크립트가 별도의 맥락에 의해 파싱되고 실행됩니다.
[Browser] async와 defer에서 defer 속성과 async 속성의 차이를 확인할 수 있습니다.
CSS
CSS는 렌더링 차단 리소스(render blocking resource)입니다. CSS는 렌더링을 할 때 반드시 필요한 리소스이기 때문에 브라우저는 빠르게 CSS를 다운로드 하는 것이 좋습니다. <head> 태그 안에서 정의하여 빠르게 리소스를 받을 수 있도록 해야합니다.
CSS는 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단할 이유가 없습니다. 그러나 자바스크립트에서 스타일 정보를 요청하는 경우 CSS가 파싱 되지 않은 상태라면 스크립트 에러가 발생할 수 있습니다.
이런 문제를 해결하기 위해 파이어폭스는 로드중이거나 파싱 중인 CSS가 있는 경우 모든 자바스크립트 실행을 중지합니다. 반면 웹킷은 로드되지 않은 CSS 가운데 문제가 될 만한 속성이 있을 때에만 자바스크립트를 중단합니다.
Attachment
CSSOM 트리와 DOM 트리를 결합하여 표시해야 할 순서대로 내용을 그려낼 수 있도록 하기 위해 렌더 트리를 형성합니다. 이 과정을 웹킷에서는 Attachment라고 합니다. 렌더 트리는 화면에 표시되는 각 노드의 위치를 계산하는 Layout에 사용되고 픽셀을 화면에 그리는 Painting 과정에도 사용됩니다.
렌더 트리를 생성하려면 브라우저는 대략 3가지 작업을 수행합니다.
- DOM 트리의 루트에서 시작하여 화면에 표시되는 노드 각각을 탐색합니다.
▷ 화면에 표시되지 않는 일부 노드들(<script>, <meta> 태그 등)은 렌더트리에 반영되지 않습니다.
▷ CSS에 의해 화면에서 숨겨지는 노드들은 렌더 트리에 반영되지 않습니다. - 화면에 표시되는 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용합니다.
- 화면에 표시되는 노드를 콘텐츠 및 계산된 스타일과 함께 내보냅니다.
DOM 트리와 렌더 트리의 관계
렌더 트리 구축의 1번에서 이야기처럼 화면에 표시되지 않는 노드들은 렌더 트리에 포함되지 않습니다.
예를 들어 <head> 태그와 같은 비시각적 DOM 노드는 렌더 트리에 추가되지 않습니다.
뿐만 아니라 CSS로 인해 display : none 속성값이 할당도니 노드들은 렌더 트리에 추가되지 않습니다. 하지만 visibility : hidden 은 렌더 트리에 포함됩니다. visivility 속성에 hidden 값이 할당된 노드는 화면에 공간을 차지하기 때문에 렌더 트리에 포함됩니다.
Layout
렌더 트리가 생성되고 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산하는 과정을 Layout 혹은 Reflow라고 합니다. 모든 상대적인 측정 값은 화면에서 절대적인 픽셀로 변환됩니다. 즉 CSS에 상대적인 값인 %로 할당된 값들은 절대적인 값인 px 단위로 변환 됩니다.
Painting
렌더 트리의 각 노드를 화면의 실제 픽셀로 나타내는 과정을 Painting 혹은 resterizing이라고 합니다. Painting 과정 후 브라우저 화면에 UI가 나타나게 됩니다.
브라우저 렌더링 요약
- HTML 마크업을 처리하고 DOM 트리를 빌드 합니다. (DOM 파싱)
- CSS 마크업을 처리하고 CSSOM 트리를 빌드 합니다. (CSSOM 파싱)
- DOM 및 CSSOM을 결합하여 렌더 트리를 형성 합니다. (Attachment)
- 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다. (Layout)
- 개별 노드를 화면에 페인트 합니다. (Painting)
위의 5단계를 걸쳐 브라우저는 화면에 렌더링 하게 됩니다.
렌더링 최적화
Reflow
어떤 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout 과정을 다시 수행하게 됩니다. 이렇게 되면 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 되고, 이 과정을 Reflow라고 합니다.
Repaint
렌더링 과정에서도 알 수 있듯이 Reflow 과정만으론 화면에 실제로 반영되지 않습니다. Reflow 과정이 일어난 후 화면에 다시 그리는 작업을 Repaint라고 합니다. 하지만 반드시 Reflow와 Repaint가 같이 일어나는 것은 아닙니다. background-color, visibility 등 레이아웃에 영향을 주지 않는 스타일 속성이 변경되었을 경우에는 Repaint만 발생합니다.
reference
'Back-End > Web & Server' 카테고리의 다른 글
| [Web & Server] 브라우저 동작 원리와 구조 (0) | 2024.06.27 |
|---|
