프론트엔드 성능 최적화

브라우저 동작 원리브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 프론트엔드의 성능 최적화를 확인하기에 앞서 브라우저가 어떻게 화면을 사용자에게 보여주는지를 알아야 한다.https://velog.io/@kmlee95/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91%EA%B3%BC%EC%A0%95%EB%B6%80%ED%84%B0-React  프론트엔드 성능 최적화프론트 엔드 성능 최적화에는 `웹 페이지 로드 최적화`, `웹 페이지 렌더링 최적화`가 있다. 1. 웹 페이지 로드 최적화(1) 브라우저 상에서 최적화`DOMContentLoaded': html, css 파싱이 끝난 시점`Loaded`: h..

2024.06.28

브라우저가 css 셀렉터를 해석하는 방법과 성능 향상 방법

브라우저가 css 셀렉터를 해석하는 방법브라우저가 css 선택자를 해석하는 방식은 일반적으로 css를 작성하는 방식과는 반대다. 브라우저는 오른쪽에서 왼쪽으로 css 선택자를 해석 한다.div p a { } 예를 들어, div p a 라는 선택자가 있다면, 브라우저는 먼저 모든 a 태그를 찾고, 그 중에서 부모 요소가 p 인 것을 찾고, 마지막으로 이 중에서 또 다시 부모 요소가 div인 것을 찾는다. 이러한 방식은 브라우저가 불필요한 요소를 검사하는 시간을 줄이는 데 도움이 된다. 왜냐하면 가장 일반적인 요소 (여기서는 a 태그)부터 검사를 시작하므로, 좀 더 빠르게 원하는 요소를 찾을 수 있기 때문이다.  css 선택자의 성능 향상 방법선택자의 복잡성 줄이기가능한 한 간단한 선택자를 사용하는 것이 좋..

2024.06.28