JS 스캐너

종합적인 JavaScript 성능, 커버리지 및 오류 분석

장점

Total Blocking Time 분석

JavaScript로 인해 메인 스레드가 얼마나 차단되는지 측정합니다. 인터랙티비티를 저하시키고 Time to Interactive를 증가시키는 긴 작업을 식별합니다.

미사용 코드 감지

파일별 미사용 JavaScript를 정확한 바이트 수와 함께 분석합니다. 페이지 로드를 느리게 하는 불필요한 코드와 과도한 번들을 빠르게 찾아냅니다.

스크립트 로딩 전략 감사

어떤 스크립트가 렌더 블로킹인지, async 또는 defer로 로드되는지 확인합니다. First Contentful Paint를 지연시키는 서드파티 스크립트를 찾아냅니다.

런타임 오류 및 비추천 API 추적

콘솔 오류, 스택 트레이스가 포함된 미처리 예외, 비추천 브라우저 API 사용을 한 번의 스캔으로 모두 캡처합니다.

TBT는 긴 JavaScript 작업(각 50ms 이상)으로 인해 메인 스레드가 차단된 총 시간을 측정합니다. TBT가 높으면 스크립트 실행이 완료될 때까지 사용자 상호작용이 지연되어 페이지가 느리게 느껴집니다.

이 도구는 Chrome의 내장 코드 커버리지 API를 사용하여 페이지 로드 중 각 스크립트 파일의 어떤 바이트가 실제로 실행되는지 추적합니다. 실행되지 않은 부분은 미사용으로 표시되며 파일별 백분율로 나타냅니다.

async 또는 defer 속성 없이 로드된 스크립트는 다운로드 및 실행이 완료될 때까지 HTML 파서를 차단합니다. 이로 인해 렌더링이 지연됩니다. 감사에서 이러한 스크립트를 모두 표시하여 async/defer를 추가하거나 페이지 하단으로 이동할 수 있도록 합니다.

네. 각 스크립트는 퍼스트파티 또는 서드파티로 분류됩니다. 어떤 외부 스크립트가 렌더링을 차단하는지, 미사용 코드가 얼마나 되는지, 오류나 비추천 API 호출을 유발하는지 확인할 수 있습니다.

스크립트에 source maps가 포함된 경우, 도구가 이를 분석하여 각 번들 내 모든 모듈의 시각적 트리맵을 생성합니다. 정확한 크기와 코드 커버리지를 보여주어 최적화하거나 제거할 의존성을 정확히 파악할 수 있습니다.