STUDY/cs5 Reflow와 Repaint가 실행되는 시점 Reflow와 Repaint가 실행되는 시점Reflow: 레이아웃이 변경될 때 발생하며, 브라우저가 요소들의 크기와 위치를 다시 계산하는 과정입니다. - DOM 엘리먼트 추가, 제거, 또는 변경. - CSS 스타일 변경이나 클래스 추가로 레이아웃이 변경될 때. - 엘리먼트의 크기를 변경하면 다른 요소에도 영향을 미칠 수 있습니다. - CSS 애니메이션과 트랜지션은 각 프레임에서 Reflow를 발생시킵니다. - `offsetWidth`, `offsetHeight` 속성 사용 시, Reflow가 트리거되어 값을 계산합니다. - 유저 인터랙션(hover 효과, 텍스트 입력, 창 크기 조정 등)이 Reflow를 유발할 수 있습니다. Repaint: 요소의 가시성이나 스타일이 변경될 때 발생.. 2024. 9. 6. 주소창에 google.com을 입력하면 일어나는 일?! 주소창에 `google.com`을 입력했을 때 일어나는 과정을 단계별로 알아보자! 1. 사용자가 URL 입력 사용자가 브라우저 주소창에 `google.com`을 입력합니다. 브라우저는 사용자가 입력한 문자열을 처리하여 적절한 요청을 준비합니다. 이 과정에서 브라우저는 입력된 값이 URL인지, 검색어인지 구분합니다. 2. DNS 조회 브라우저는 입력된 도메인 이름(`google.com`)에 해당하는 IP 주소를 알아내기 위해 DNS(Domain Name System) 서버에 요청을 보냅니다. - 브라우저 캐시 → 운영체제 캐시 → 라우터 캐시 → ISP(인터넷 서비스 제공자) 캐시 순으로 DNS 조회가 이루어집니다. - 만약 캐시에 해당 정보가 없다면, DNS 서버가 도메인의 IP 주소.. 2024. 9. 6. 웹 브라우저의 렌더링 과정 이해하기 우리가 웹사이트에 접속할 때, 브라우저는 복잡한 과정을 통해 웹페이지를 화면에 표시합니다. 이 과정은 '렌더링'이라고 불리며, 여러 단계로 나누어져 있습니다. 웹 브라우저가 어떻게 웹페이지를 렌더링하는지 알아보겠습니다. 1. HTML 파싱과 DOM 생성첫 번째 단계는 서버로부터 HTML 문서를 받아오는 것입니다. 브라우저는 이 HTML 문서를 바탕으로 'DOM(Document Object Model)'을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 노드는 HTML 요소를 나타냅니다. 예를 들어, ``나 `` 같은 태그들이 각각 DOM의 노드가 됩니다. 2. CSS 파싱과 스타일 계산다음 단계는 CSS를 파싱하는 것입니다. 브라우저는 HTML 파일 내의 `` 태그 또는 링크.. 2024. 8. 30. SSR 과 CSR 비교! 일단 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)은 웹에서 페이지의 내용을 사용자에게 보여주는 두가지 방식이다. 클라이언트 사이드 렌더링(CSR) CSR은 렌더링 프로세스가 사용자의 웹 브라우저의 클라이언트 측에서 일어난다. 서버는 JavaScript 파일과 함께 최소한의 HTML 문서를 클라이언트에 보낸다. JavaScript 코드는 API에서 데이터를 가져오고 DOM을 조작하여 사용자 인터페이스를 업데이트한다. 🐇CSR의 장점: 빠른 상호 작용: CSR을 사용하면 클라이언트가 서버에 추가 요청을 하지 않고도 UI를 업데이트할 수 있다. 원활하고 빠른 사용자 경험을 제공한다. 성능 향상: 첫 페이지를 로딩한 후에는 렌더링이 필요한 부분만 불러오기때문에 빠르다. 필요한 구성 요소나 데.. 2024. 3. 1. 이전 1 2 다음
