Performance (7) 썸네일형 리스트형 [번역]CSS 셀렉터 성능 최적화 CSS 셀렉터가 성능에 미치는 영향을 알아봅니다. 아래 게시물의 번역입니다. https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/?ck_subscriber_id=1833874137 The truth about CSS selector performance If you're a web developer, you may have already heard that some CSS selectors are faster than others. And you're probably hoping to find a list of the better selectors to use in this article. Well,.. Critical Rendering Path 최적화하기 사용자에게 최대한 빨리 화면을 보여주고, 최대한 빨리 앱의 기능을 제공하는 방법을 알아봅시다. 우측 문서의 번역입니다. : https://web.dev/critical-rendering-path-analyzing-crp/ Analyzing Critical Rendering Path Performance Learn to identify and resolve critical rendering path performance bottlenecks. web.dev Critical Rendering Path의 성능 병목 현상을 식별하고 해결하려면 일반적인 함정에 대한 충분한 지식이 필요합니다. 실습을 통해 페이지를 최적화하는 데 도움이 되는 일반적인 성능 패턴을 알아봅시다. Critical Rendering Pat.. CSS 애니메이션 성능 분석 및 개선하기 원글을 번역한 글을 학습한 내용을 정리한 글 입니다. Performance monitoring in CSS animations Animation using JavaScript ? or Animation using CSS? medium.com CSS 애니메이션은 일부 속성에 의존함 position : absolute / relative transform opacity left, right, top, bottom 등등… 성능 측정 결과를 이해하는 방법 웹 브라우저의 렌더링 방식을 간단히 살펴보겠습니다. 웹 브라우저는 UI를 다음과 같은 방식으로 생성합니다. Recalculate Style 요소에 적용할 스타일을 계산. Layout 요소의 레이아웃을 생성하고, 화면에 배치. Paint 생성된 모든 레이아웃에 .. 리액트 성능 최적화 : Death By a Thousand Cuts (천 번 베이면 죽는다.) Death By a Thousand Cuts 잦은 상태 업데이트는 성능 이슈가 됩니다. 이는 보통 하나의 컴포넌트가 너무 많은 일을 할 때 발생합니다. 이 문제는 식별하기 쉽습니다. 하지만 하나의 상태 업데이트에 너무 많은 컴포넌트가 묶여있으면 찾기 어렵습니다. 이게 contextAPI의 단점입니다. 따라서, 컴포넌트를 일단 작게 만드는게 중요합니다. 기존의 최적화 방법들엔 아래와 같은 문제들이 존재합니다. useMemo, callback등 캐시 방법은 앱의 복잡도를 높입니다. 리액트는 렌더링 외에, 최적화를 위한 연산을 수행합니다. 때로는 메모보다 그냥 렌더링하는게 성능이 좋을 수도 있습니다.(ex 긴 리스트 컴포넌트) 불필요한 리렌더링을 방지할 수 있는 성능 최적화 방법들을 알아보겠습니다. 여러개의 .. 리액트 성능 최적화 : React.useMemo TLDR : CPU 자원을 많이 소비하는 연산에 useMemo를 사용한다. 사용자에게 최적의 경험을 선사하려면 60fps이상을 제공해야 한다. (1000ms/60) = 약 16.7ms 이니, 하나의 연산이 이 시간 이상 걸리면 안된다는 것을 의미한다. npm run build / npm run serve를 통해 해당 최적화 조건을 확인한다. 크롬 개발자 도구의 성능 탭 > CPU를 6배 느리게 (본인은 맥os + edge를 활용함을 유의) 위 화면의 문제점은 리렌더링이 발생할 때마다 300ms정도 걸리는 연산을 계속 수행한다는 것이다. 다른 상태의 변화에 의해 해당 컴포넌트가 다시 호출될 때마다 300ms가 걸린다면 끔찍하다. 자세히 살펴보면 match-sorter의 연산이 많은 시간을 잡아먹고 있다. .. 리액트 성능 최적화 : Code Splitting(코드 스플리팅) 모든 최적화 방법중에 성능이 가장 좋다. TLDR 필수사항 React suspense 필요 - 비동기 상태와 렌더링 상태의 동기화 React.Lazy 사용 default export 필요 추가 최적화 + eager loading 사용 (good) ++ 웹팩 매직 키워드를 이용한 prefetch 사용 (best) 시각적 확인 : 네트워크 탭과 커버리지 탭 사용 크롬 incognito 모드를 사용하는 것이 좋음. 크롬 확장 프로그램을 다운받지 않기 때문 커버리지 탭 사용 방법 cmd + shift + p > show coverage 서스펜스 팁 Lazy Loading 먼저 다이나믹 임포트가 필요하다. // 다이나믹 임포트. const loadGlobe = () => import('../globe') 서스펜스.. [Epic React][Build an Epic React App][Performance] bookshelf/INSTRUCTIONS.md at exercises/09-performance · kentcdodds/bookshelf (github.com) GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop Build a ReactJS App workshop. Contribute to kentcdodds/bookshelf development by creating an account on GitHub. github.com Background 웹 애플리케이션이 직면하는 가장 일반적인 성능 문제 중 하나는 초기 페이지 로드입니다. 애플리케이션이 커짐에 따라 JavaScript 번들의 크기도 커집니다. 인터넷을 통해 해당 데이터를 보내는 데 시간이 .. 이전 1 다음
