😺 Study/Web
[Web] 크롬 개발자도구로 렌더링 성능 확인하기
렌더링이란? - 웹 애플리케이션에 데이터를 표시하는 행위 개발자도구로 렌더링 성능 확인하는 방법 (간단히 정리하자면...) 1. F12(개발자도구)를 들어간다. 2. 상단 메뉴 중 >>(화살표)를 클릭, Performance(성능)을 클릭한다. 3. ⏺ 녹화버튼 또는 🔄 새로고침 버튼을 클릭한다. 4. 초당 프레임 수 및 하단의 CPU 사용량 분포 확인 5. 오래 걸리는 렌더링 영역 확인 후 개선하기 css 선택자의 개수를 줄임으로써 변화를 살펴보았다. 선택자의 개수는 최대 3개까지가 적당하다. (참고로 스타일엔진은 선택자를 오른쪽부터 왼쪽으로 읽는다) 참고 - https://ordinary-code.tistory.com/58 [프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기) 렌..
2023. 2. 15.
