<commit_before>---
layout: post
title: "(Frontend) Browser - Reflow & Repaint"
date: 2018-10-23 10:35:00
author: gloria
categories: frontend
tags: javascript 브라우저렌더링 브라우저구조
---

* TOC
{:toc}

Reflow와 Repaint를 이해하려면 브라우저에 대한 이해가 필요하다.

## 브라우저(Browser)

우리가 일반적으로 많이 사용하는 **IE, 크롬, 파이어폭스, 사파리...**와 같은 웹 브라우저는 사용자가 선택한 자원(URL)을 서버에 요청하고 서버로부터 응답받은 결과를 화면에 그려주는 역할을 한다.

#### 브라우저 구조

브라우저의 동작을 좀 더 쉽게 이해하기 위해 해당 구조를 살펴보자.

![browser-structure](/Volumes/data/private/gloriaJun.github.io/assets/images/post/browser-structure.png)



###### User Interface (사용자 인터페이스)
브라우저의 주소 표시줄, 이전/다음 버튼, 북마크 등과 같이 사용자가 직접 조작할 수 있는 영역이다.

###### Browser Engine (브라우저 엔진)
사용자 인터페이스가 렌더링 엔진 사이의 동작을 담당한다

###### Rendering Engine (렌더링 엔진)
사용자가 요청한 내용에 대한 결과를 화면에 표시한다. 즉, HTML과 CSS을 파싱하여 화면에 표시한다.
브라우저마다(IE, 크롬, 사파리, 파이어폭스, …) 각기 다른 렌더링 엔진을 이용하여 동작한다.
> 크롬은 각 탭마다 별도의 렌더링 엔진 인스턴스를 사용하므로 각 탭이 독립된 프로세스로 처리된다.

###### Networking (통신)
HTTP 요청과 같은 네트워크 호출에 사용된다.

###### Javascript Interpreter (자바스크립트 해석기)
자바스크립트 코드를 해석하고 실행한다.

###### UI Backend (UI 백앤드)
브라우저의 select, input, modal 등과 같은 기본 장치를 그릴 때 사용한다.

###### Data Storage (자료 저장소)
Cookie, Local Storage 등과 같이 브라우저의 메모리를 활용하여 데이타를 저장한다.



#### 브라우저의 렌더링 과정

렌더링 엔진은 네트워크로부터 요청한 문서의 내용을 얻는 것으로 시작하며 문서의 내용은 보통 8KB 단위로 전송된다.

기본 동작 과정은 다음과 같다.

![browser-rendering](/Volumes/data/private/gloriaJun.github.io/assets/images/post/browser-rendering.png)



###### DOM (Documnet Object Model) Tree
HTML 태그를 파싱하여 DOM 트리를 구성한다.

###### CSSOM (CSS Object Model) 생성
스타일 정보를 통하여 스타일 구조체를 생성한다.
스타일 정보는 다음과 같이 3 단계로 나누어 처리된다.
- 브라우저 자체에 포함된 기본 스타일 정보
- 사용자 정의 스타일 (외부 또는 내부에 정의된 스타일)
- HTML 태그에 style 속성을 이용하여 정의된 인라인 스타일 정보

###### Render tree construction (렌더 트리 생성)
- DOM 트리의 루트(html)에서 시작해서 페이지에 표시되는 각각의 노드에 일치하는 스타일 구조의 규칙을 찾아서 붙여나가며 렌더 트리를 생성한다.
- `<head>, <title>, <script> 등`은 화면에 표시되는 노드는 아니므로 렌더 트리에 포함되지 않는다.
- 스타일이 `display: none`으로 적용된 경우는 렌더 트리에 포함되지 않는다.
- `visibility: hidden`이 적용된 노드는 눈에 보이지는 않지만 렌더 트리에 포함된다.
- 렌더 트리에서 각 노드는 frame이나 box로 불리며, css박스 속성 정보가 있다.

###### Layout of the render tree (렌더 트리 배치)
- 생성된 렌더 트리로부터 엘리먼트의 위치나 크기 정보를 계산하여 생성한다.
- 이 과정에서 상대 값(예. %단위)은 절대 값(예. px단위)으로 변환되어 표현된다.

###### Painting the render tree (페인팅)
- 렌더 트리를 순회하면서 페인트 함수를 호출에 노드를 화면에 표현한다.


## Reflow & Repaint<commit_msg>update image path<commit_after>---
layout: post
title: "(Frontend) Browser - Reflow & Repaint"
date: 2018-10-23 10:35:00
author: gloria
categories: frontend
tags: javascript 브라우저렌더링 브라우저구조
---

* TOC
{:toc}

Reflow와 Repaint를 이해하려면 브라우저에 대한 이해가 필요하다.

## 브라우저(Browser)

우리가 일반적으로 많이 사용하는 **IE, 크롬, 파이어폭스, 사파리...**와 같은 웹 브라우저는 사용자가 선택한 자원(URL)을 서버에 요청하고 서버로부터 응답받은 결과를 화면에 그려주는 역할을 한다.

#### 브라우저 구조

브라우저의 동작을 좀 더 쉽게 이해하기 위해 해당 구조를 살펴보자.

![browser-structure]({{ site.baseurl }}/assets/images/post/browser-structure.png)



###### User Interface (사용자 인터페이스)
브라우저의 주소 표시줄, 이전/다음 버튼, 북마크 등과 같이 사용자가 직접 조작할 수 있는 영역이다.

###### Browser Engine (브라우저 엔진)
사용자 인터페이스가 렌더링 엔진 사이의 동작을 담당한다

###### Rendering Engine (렌더링 엔진)
사용자가 요청한 내용에 대한 결과를 화면에 표시한다. 즉, HTML과 CSS을 파싱하여 화면에 표시한다.
브라우저마다(IE, 크롬, 사파리, 파이어폭스, …) 각기 다른 렌더링 엔진을 이용하여 동작한다.
> 크롬은 각 탭마다 별도의 렌더링 엔진 인스턴스를 사용하므로 각 탭이 독립된 프로세스로 처리된다.

###### Networking (통신)
HTTP 요청과 같은 네트워크 호출에 사용된다.

###### Javascript Interpreter (자바스크립트 해석기)
자바스크립트 코드를 해석하고 실행한다.

###### UI Backend (UI 백앤드)
브라우저의 select, input, modal 등과 같은 기본 장치를 그릴 때 사용한다.

###### Data Storage (자료 저장소)
Cookie, Local Storage 등과 같이 브라우저의 메모리를 활용하여 데이타를 저장한다.



#### 브라우저의 렌더링 과정

렌더링 엔진은 네트워크로부터 요청한 문서의 내용을 얻는 것으로 시작하며 문서의 내용은 보통 8KB 단위로 전송된다.

기본 동작 과정은 다음과 같다.

![browser-rendering]({{ site.baseurl }}/assets/images/post/browser-rendering.png)



###### DOM (Documnet Object Model) Tree
HTML 태그를 파싱하여 DOM 트리를 구성한다.

###### CSSOM (CSS Object Model) 생성
스타일 정보를 통하여 스타일 구조체를 생성한다.
스타일 정보는 다음과 같이 3 단계로 나누어 처리된다.
- 브라우저 자체에 포함된 기본 스타일 정보
- 사용자 정의 스타일 (외부 또는 내부에 정의된 스타일)
- HTML 태그에 style 속성을 이용하여 정의된 인라인 스타일 정보

###### Render tree construction (렌더 트리 생성)
- DOM 트리의 루트(html)에서 시작해서 페이지에 표시되는 각각의 노드에 일치하는 스타일 구조의 규칙을 찾아서 붙여나가며 렌더 트리를 생성한다.
- `<head>, <title>, <script> 등`은 화면에 표시되는 노드는 아니므로 렌더 트리에 포함되지 않는다.
- 스타일이 `display: none`으로 적용된 경우는 렌더 트리에 포함되지 않는다.
- `visibility: hidden`이 적용된 노드는 눈에 보이지는 않지만 렌더 트리에 포함된다.
- 렌더 트리에서 각 노드는 frame이나 box로 불리며, css박스 속성 정보가 있다.

###### Layout of the render tree (렌더 트리 배치)
- 생성된 렌더 트리로부터 엘리먼트의 위치나 크기 정보를 계산하여 생성한다.
- 이 과정에서 상대 값(예. %단위)은 절대 값(예. px단위)으로 변환되어 표현된다.

###### Painting the render tree (페인팅)
- 렌더 트리를 순회하면서 페인트 함수를 호출에 노드를 화면에 표현한다.


## Reflow & Repaint
{'fraction_non_alphanumeric': 0.11928251121076233, 'fraction_numerical': 0.007174887892376682, 'mean_word_length': 3.4299900695134062, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7482638', 'n_tokens_mistral': 3341, 'n_tokens_neox': 4512, 'n_words': 735}