https://github.com/umsungjun/algorithm-cs
알고리즘과 CS지식을 공부합니다.
https://github.com/umsungjun/algorithm-cs
Last synced: 5 months ago
JSON representation
알고리즘과 CS지식을 공부합니다.
- Host: GitHub
- URL: https://github.com/umsungjun/algorithm-cs
- Owner: umsungjun
- Created: 2023-06-08T14:51:56.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2026-01-12T12:52:59.000Z (5 months ago)
- Last Synced: 2026-01-12T19:48:55.910Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 53.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 브라우저의 렌더링 원리
브라우저가 화면에 나타나는 요소를 렌더링 할 때, `웹킷(Webkit)`이나 `게코(Gecko)` 등과 같은 렌더링엔진을 사용합니다.
1. **HTML을 [파싱] 후, `DOM트리`를 구축합니다.**
2. **CSS를 파싱 후, `CSSOM`트리를 구축합니다.**
3. **Javascript를 실행합니다.**
- 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 `중단`됩니다.
4. **DOM과 CSSOM을 조합하여 `렌더트리`를 구축합니다.**
- 주의! `display: none` 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다.
5. **뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산합니다. `(Layout 단계)`**
6. **계산한 위치 / 크기를 기반으로 화면에 그립니다. `(Paint 단계)`**
---
# Reflow와 Repaint가 실행되는 시점
### `Reflow`
- 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, 자식, 부모, 조상) 수치를 다시 계산하여, `렌더 트리를 재생성하는 과정`
### `Reflow 예시`
- DOM 엘리먼트 추가, 제거 또는 변경
- CSS 스타일 추가, 제거 또는 변경
- CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다.
- CSS3 애니메이션과 트랜지션, 애니메이션의 모든 프레임에서 리플로우가 발생합니다.
- offsetWidth와 offsetHeight의 사용. offsetWidth와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산됩니다.
- 유저 행동, 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환들을 활성화하여 리플로우를 트리거할 수 있습니다.
### `Repaint`
- Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint라고 합니다.
### `Repaint 예시`
- 가시성이 변경되는 순간(opacity, background-color, visibility, outline 등등)
- Reflow가 실행된 순간 뒤에 실행됩니다.
# 주소창에 google.com을 입력하면 일어나는 일
1. 사용자가 웹 브라우저를 통해 google.com 을 입력하면 URL 주소 중 도메인 네임 부분을 `DNS` 서버에서 검색합니다.
2. DNS 서버에서 해당 도메인 네임에 해당하는 `IP` 주소를 찾아 사용자가 입력한 `URL` 정보와 함께 전달합니다.
3. 브라우저는 `HTTP 프로토콜`을 사용하여 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송됩니다.
4. 서버는 `response` 메시지를 생성하여 다시 브라우저에게 데이터를 전송합니다.
5. 브라우저는 `response`를 받아 파싱하여 화면에 렌더링합니다.
# 호이스팅(hoisting)이란?
- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. `var`로 선언한 변수의 경우 호이스팅 시 `undefined`로 변수를 초기화합니다. 반면 `let`과 `const`로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
```
console.log(name); // undefined
var name = "sungJun";
console.log(name); // sungJun
```
- 위의 예제에서는 `var name = "sungJun"`가 작성되기 전 `console.log(name)`은 초기화 된 `var name;`을 출력한다는 의미로 `undefined`를 출력하는 것이다.
- `var`는 선언, 초기화가 동시에 이루어지기 때문에 `undefined`를 출력하지만 `let, const`는 선언단계만 호이스팅 되기 때문에 `Reference Error`를 출력합니다.