sodol-dotcom

Reflow와 Repaint는 웹 페이지의 렌더링 과정에서 발생하는 두 가지 중요한 개념이다.이 개념을 이해하는 것은 성능 최적화에 큰 도움이 된다.  Reflow (리플로우)정의: Reflow는 DOM 요소의 크기, 위치, 또는 구조가 변경될 때 발생한다. 예를 들어, 요소의 크기를 변경하거나, 새로운 요소를 추가하거나, CSS 스타일을 수정할 때 발생한다.예시: 브라우저에서 텍스트의 폰트 크기를 변경할 때요소의 `margin`, `padding`, `border` 등을 수정할 때화면 크기가 변경될 때 (예: 창 크기 조절)중요성: Reflow가 발생하면 브라우저는 레이아웃을 다시 계산해야 하므로 CPU와 메모리 자원을 소모하게 된다. 따라서 너무 많은 Reflow는 성능 저하를 일으킬 수 있다.  R..

브라우저의 렌더링 과정(Critical Rendering Path)은 웹 페이지를 사용자에게 표시하기 위해 브라우저가 데이터를 처리하고 시각적으로 표현하는 일련의 단계이다. 이 과정을 이해하면 웹페이지가 어떻게 만들어지는지, 그리고 최적화할 부분이 어디인지 알 수 있다.  1. HTML 다운로드사용자가 웹페이지를 요청하면 브라우저는 서버에서 HTML 파일을 다운로드한다. 이 파일은 웹 페이지의 구조를 정의한다. 2. HTML 파싱다운로드한 HTML 파일을 읽어들여 DOM(Document Object Model)을 생성한다. DOM은 웹페이지의 각 요소를 객체로 표현한 구조이다. 예를 들어, `` 태그는 DOM에서 하나의 객체로 만들어진다. 3. CSS 다운로드HTML을 파싱하면서 브라우저는 CSS 파일(..

1. HTML 문서 읽기HTML 문서 요청: 사용자가 웹 페이지를 열면, 브라우저가 웹 서버에 HTML 문서를 요청한다. 웹 서버는 이 요청에 응답하여 HTML 문서를 브라우저로 보낸다.HTML 문서 수신: 브라우저는 HTML 문서의 내용을 네트워크를 통해 받아온다.2. HTML 파싱(Parsing)파싱(Parsing)*은 HTML 문서의 텍스트를 브라우저가 이해할 수 있는 구조로 변환하는 과정이다. 이 과정은 다음과 같이 진행된다:문서 파서(Document Parser): 브라우저가 HTML 문서를 문자 단위로 읽어들이며, 문서 파서가 이를 분석한다. 문서 파서는 HTML 태그와 내용을 이해하고 구조를 형성한다.토큰화(Tokenization): HTML 문서의 텍스트가 토큰(Token)이라고 불리는 작..

웹 페이지를 여는 과정:웹 브라우저: 웹 브라우저는 HTML 문서를 받아서 화면에 표시한다. 브라우저는 HTML 문서를 해석하여 화면에 보여주기 위해 내부적으로 문서를 처리한다.문서 파싱:파싱(Parsing): 파싱은 브라우저가 HTML 문서의 텍스트를 읽어들이고 이해할 수 있는 구조로 변환하는 과정이다. 즉, HTML 문서의 텍스트를 읽어들여 브라우저가 이해할 수 있는 형식으로 변환한다.파싱이 끝나면 브라우저는 이 구조를 DOM(Document Object Model)이라고 부르는 형태로 변환한다.DOM(Document Object Model)DOM: DOM은 웹 페이지의 구조를 JavaScript가 이해하고 조작할 수 있는 형태로 표현한 것이다. DOM은 HTML 문서의 각 요소를 객체로 변환하며, ..