[Web] 크롬 개발자도구로 렌더링 성능 확인하기

렌더링이란?

- 웹 애플리케이션에 데이터를 표시하는 행위

 

 

개발자도구로 렌더링 성능 확인하는 방법 (간단히 정리하자면...)

1. F12(개발자도구)를 들어간다.

2. 상단 메뉴 중 >>(화살표)를 클릭, Performance(성능)을 클릭한다.

3. ⏺ 녹화버튼 또는 🔄 새로고침 버튼을 클릭한다.

4. 초당 프레임 수 및 하단의 CPU 사용량 분포 확인

5. 오래 걸리는 렌더링 영역 확인 후 개선하기

 

 

---

css 선택자의 개수를 줄임으로써 변화를 살펴보았다.

선택자의 개수는 최대 3개까지가 적당하다.

(참고로 스타일엔진은 선택자를 오른쪽부터 왼쪽으로 읽는다)

 

포트폴리오 테스트 > css 선택자 수정 전

포트폴리오 테스트 > css 선택자 수정 후

 

 

 

 

 

참고 - https://ordinary-code.tistory.com/58

[프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기)

https://wit.nts-corp.com/2017/06/05/4571

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그