브라우저 렌더링
1. Load: 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 서버에게 요청하고 응답을 받는다.
2. HTML과 CSS는 렌더링 엔진에 의해 파싱되고 트리구조가 생성되며, 자바스크립트는 자바스크립트 엔진에 의해 파싱되고 AST를 생성된다.
3. 렌더링 엔진은 HTML과 CSS 파일을 로드받은 다음, 파싱하여 DOM과 CSSOM을 생성하고, 그를 결합하여 렌더 트리를 생성한다.
4. 자바스크립트 엔진은 JS 파일을 로드 받은 다음, 파싱하여 AST(Abstract Syntax Tree)를 생성하고, 바이트 코드로 변환하여 실행한다. 자바스크립트는 인터프리터 언어이므로 문 단위로 해석되고 실행된다. 이때 자바스크립트는 DOM API를 통해서 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
5. 렌더 트리를 기반으로 HTML요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 페인팅 한다.위 과정에서 4번 과정에 의해서 5번에서 다시 레이아웃을 재계산하는 상황이 `Reflow`
Reflow가 발생하면 Repaint는 필연적으로 발생함.
Reflow는 HTML 요소들의 위치와 크기를 다시 계산해야 하기 때문에 시간이 오래 걸리므로, Reflow가 발생하는 코드는 지양해야함.
'JavaScript' 카테고리의 다른 글
| 팝업호출 + 이미지 + 클릭 이벤트 (0) | 2023.12.04 |
|---|---|
| reduce() (0) | 2023.01.10 |
| 디바운스(Debounce), 스로틀(Throttle), 레이아웃 스레싱(Layout Thrashing) (0) | 2023.01.02 |
| x,y 두 좌표의 직선거리 구하기 (0) | 2022.12.16 |
| dotenv, express, axios (0) | 2021.12.31 |
