Jerry

Reflow와 Repaint는 웹 브라우저가 페이지 렌더링하는 과정에서 발생하는 중요한 개념이다.두 과정은 비슷하게 들릴 수 있지만, 실제로 다르고 서로 다른 시점에 발생한다.    먼저, Reflow(리플로우)란?=> 브라우저가 페이지 레이아웃을 계산하는 과정   페이지에서 임의의 요소가 변경되면 브라우저는 그에 맞게 레이아웃을 새로 계산= 문서의 DOM 트리 다시 계산 -> 그에 따라 요소 크기나 위치 재조정 시점:  페이지 구조, 레이아웃 영향 미치는 변경이 있을 경우- DOM에 새로운 요소가 추가되거나 삭제- 요소의 크기나 위치 변경- 뷰포트 크기나 화면 회전- 폰트 크기나 스타일 변경- CSS Flexbox나 Grid 사용 성능 문제- 비교적 비싼 작업으로, 페이지 크기와 구조가 복잡할수록 ->..

제가 브라우저에 URL을 입력하면 어떤 일이 일어나는지 쉽게 설명해볼게요. 이 과정은 우리가 매일 경험하는 일이지만, 실제로는 여러 단계의 복잡한 흐름이 진행됩니다.사용자가 웹 브라우저 https://www.example.com 입력URL 주소 중 Domain Name(도메인 이름)을 DNS 서버에서 검색DNS 서버에서, 해당 Domain Name과 일치하는 IP 주소 탐색탐색 후, 사용자가 입력한 URL 정보와 함께 전달브라우저는 HTTP Protocol 사용하여, 요청 메시지 생성HTTP 요청 메시지는 TCP/IP 프로토콜 사용하여 서버로 전송서버는,Response 메시지 생성하여다시 브라우저에게 데이터 전송브라우저는, Response 받아 파싱화면에 렌더TIP✨DNS는, https://www.exa..

제목을 영어로 하면 'what happens when type google'이다. 실제로, 이 문장을 검색을 하면 관련된 깃허브 문서가 나온다. 이번 주제를 정리해보려고 (원문을 보는 습관을 지키기 위해서) 해당 원문도 읽어보려고 시도했지만 용어와 내용이 나에게 버거웠다. CS 지식의 부족함을 느끼고 다른 글을 찾다가, NAVER D2, '최신 브라우저의 내부 살펴보기'라고 구글 개발자가 적어놓은 글을 가져온 내용을 보았는데, 이 글은 설명이 잘 되어 있어서 이해가 될 뻔하다가(?) 이해가 안 되기 시작해서 이것도 포기했다. (CS공부도 꾸준히 빡세게 공부하는 수밖에 없다! 대신, 급하게 생각하지 말자!!) 결국, 다시 돌아와 처음 언급한 'what happens when type google'의 번역글..