성과 통찰력 개요
성능 통찰력은 Chrome Chrome DevTools(Chrome102 버전 출시)에 내장된 도구이며 아래 그림과 같이 현재 Chrome DevTool에서 시작할 수 있습니다. CPU를 시뮬레이션하고 4x 속도 저하를 선택한 후 시작할 수 있습니다. 4x 저속 CPU 시뮬레이션 또한 다양한 네트워크의 테스트 요구 사항을 충족하기 위해 네트워크를 시뮬레이션할 수도 있습니다.
위 그림에서 페이지 로드 측정을 클릭하면 현재 페이지 성능 분석이 시작됩니다!
성능 통찰력 도구의 가장 편리한 부분은 패널의 맨 오른쪽에 있는 "통찰력" 패널입니다. 렌더링 차단 요청, 장시간 작업, 레이아웃 변경 등의 이벤트를 발생한 순서대로 수직 타임라인 형태로 표시합니다. 이러한 특정 이벤트를 클릭하면 잠재적인 원인과 영향을 받는 요소 등에 대한 자세한 정보를 제공하는 "세부 정보" 탭으로 이동합니다. 세부 정보에서는 성능 문제에 영향을 미치는 다양한 요인을 볼 수 있습니다. 불행히도 복원 계획은 여전히 수준을 넘어야 합니다. 벽. jd 홈페이지를 예로 들어보면 Cumulative Layout 이동이 느린 것을 쉽게 알 수 있습니다(빨간색 상자와 빨간색 화살표는 기준을 심각하게 초과한 것으로 식별되어 수정이 필요함).더 최적화하려면 다음을 클릭하세요. 이 이벤트를 통해 문제에 대한 자세한 설명과 특정 최적화 계획을 볼 수 있습니다. 또한 페이지 상단(녹색 상자)에서는 현재 페이지의 FCP, LCP, DCL, TTI의 매개변수 표시를 쉽게 확인할 수 있습니다. 표시의 의미 및 기준 시간에 대한 자세한 내용은 해당 기사를 참조하세요. :
이 문서에서는 프런트 엔드 성능 테스트와 관련된 핵심 성능 지표를 이해합니다.
아래 그림의 Toggle 시각적 미리보기 버튼을 클릭하면 페이지의 특정 시점에 표시되는 UI를 확인할 수 있고, 스크롤바를 드래그하면 시점에 따른 UI 로딩 변화를 쉽게 확인할 수 있습니다.
성능과 성능 통찰력의 비교
Chrome DevTools의 성능을 활용하여 페이지의 성능을 분석할 수도 있지만 개인적으로 이 도구는 사용하기 쉽지 않다고 생각합니다.이전 Performance와 비교할 때 Performance Insight의 장점은 다음과 같습니다.
- 개발자에게 보다 간결하고 친숙한 페이지 성능 기록을 제공하고 전체 페이지 렌더링 프로세스를 기본 인터페이스의 2차원에서 표시합니다. 가로 축은 시간 축이고 세로 축은 렌더링 프로세스의 각 단계입니다.
- 개발자에게 핵심 페이지 성능 지표 분석 제공, Insight 패널에 페이지 성능 지표 및 결함 표시, 수리 제안 제공
- 일반 개발자가 웹 페이지 성능을 이해하는 것이 더 쉽지만 이는 아직 실험적인 모듈이며 최적화할 여지가 많습니다.
Performance Insight의 사용에 관해서는 직접 사용해 보시길 권합니다. 이 도구의 디자인은 사용하기 매우 쉽습니다. 프론트엔드 관련 작업 개발이나 테스트에 참여한 학생들은 10분 안에 시작할 수 있다고 믿습니다.
내 모든 기사는 독자들이 실제 업무에서 직면하는 문제를 해결하는 데 도움이 되기를 바랍니다! 글이 도움이 되셨다면 좋아요, 북마크, 전달 부탁드립니다! 여러분의 격려는 제가 기사를 계속 업데이트하는 가장 큰 동기가 됩니다!