Chrome DevTools의 Performance 탭에서 할 수 있는 것은?

Q: Chrome DevTools의 Performance 탭에서 할 수 있는 것은?

페이지의 런타임 성능을 기록하여 CPU 사용, 프레임 드랍, 메인 스레드 활동 등을 타임라인으로 분석한다 Performance 탭은 페이지의 런타임 성능을 프로파일링합니다. 기록(Record)을 시작하면 CPU 활동, JavaScript 실행, 렌더링, 페인팅 등을 타임라인에서 시각화합니다. 긴 태스크(Long Task), 레이아웃 시프트, 프레임 드랍의 원인을 파악하는 데 핵심 도구입니다.

보통 freeCodeCamp

보기 및 정답

A JavaScript 소스 코드를 실시간으로 수정하고 함수를 직접 오버라이드하여 런타임 동작을 변경할 수 있다

B 페이지의 런타임 성능을 기록하여 CPU 사용, 프레임 드랍, 메인 스레드 활동 등을 타임라인으로 분석한다

C 네트워크 요청의 속도를 측정하고 특정 도메인으로의 HTTP 요청을 차단하여 응답을 분석한다

D HTML 문서의 DOM 요소 구조를 직접 변경하고 CSS 속성을 인라인으로 수정하여 적용한다

해설

Performance 탭은 페이지의 런타임 성능을 프로파일링합니다. 기록(Record)을 시작하면 CPU 활동, JavaScript 실행, 렌더링, 페인팅 등을 타임라인에서 시각화합니다. 긴 태스크(Long Task), 레이아웃 시프트, 프레임 드랍의 원인을 파악하는 데 핵심 도구입니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

Chrome DevTools의 Performance 탭에서 할 수 있는 것은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩