네트워크 패널 및 HAR 파일을 사용하여 JavaScript UI 성능 분석

네트워크 패널 및 HAR 파일을 사용하여 JavaScript UI 성능 분석

내 페이지가 느리게 로드됩니다! 내 페이지가 로드 중 멈췄습니다!

이런 민원 들어보셨나요?

가장 명백한 UI 성능 문제는 긴 로딩 시간입니다. 웹 페이지를 로드하는 데 2초 이상 걸리면 사용자 경험이 좋지 않은 것으로 간주됩니다. 로드하는 데 5초 이상 걸리면 웹 애플리케이션을 사용할 수 없는 것으로 간주됩니다.

UI 개발자로서 우리는 항상 이러한 상황에 직면해 있습니다. 개발 환경에서는 성능이 뛰어난 코드를 작성하는 데 중점을 둡니다. 그러나 느린 인터넷 연결, 오래된 브라우저, 캐시된 데이터 및 쿠키, 광고 차단기, 브라우저 확장 프로그램, 열려 있는 탭이 많거나 단순히 브라우저가 활성화되지 않은 상태와 같은 로드 문제를 일으킬 수 있는 많은 요인이 있습니다. 잠시 다시 시작되었습니다.

우리는 각 사용자의 작업 환경을 알지 못할 수 있습니다. 제한된 액세스로 네트워크 활동을 분석하여 문제를 검사하고 해결할 수 있습니다. 이 기술은 한동안 사용되어 왔으며 JavaScript 성능을 측정하고 병목 현상을 디버깅하는 가장 효과적인 방법 중 하나로 남아 있습니다.

DevTools의 네트워크 패널

모든 브라우저는 DevTools를 제공합니다. 이 기사에서는 Chrome을 예로 사용합니다. 다른 브라우저용 DevTools도 비슷한 방식으로 작동합니다.

기본적으로 네트워크 패널은 DevTools가 열려 있는 경우 모든 네트워크 요청을 기록합니다.

다음은 요청 테이블이 http://www.qwerly.com/의 21개 요청을 표시하는 예입니다.

요청 테이블에는 DevTools가 열린 이후에 이루어진 모든 요청이 표시됩니다. 요청은 웹 애플리케이션이 어떻게 작동하는지 확인하기 위해 검사됩니다. 이 테이블에는 두 부분이 있습니다.

  • 대상 요청을 기록하도록 제어를 설정합니다.
  • 저장된 요청을 분석합니다.

대상 요청을 기록하기 위한 제어 설정

대상 요청을 기록하는 방법에 대해 여러 가지 제어를 구성해야 합니다.

  • 녹음 버튼: 기본적으로 녹음 버튼은 켜져 있지만 끌 수 있습니다. DevTools가 더 이상 요청을 기록하지 않으면 회색으로 변경됩니다.

  • 지우기 버튼: 요청 테이블의 모든 요청을 지웁니다.

  • 필터 버튼: 다음 행의 필터 패널을 보이거나 숨깁니다.

필터 버튼이 켜져 있으면 요청 테이블을 텍스트로 필터링할 수 있으며 ‘All’, ‘Fetch/XHR’(XMLHttpRequest), ‘JS’(JavaScript), ‘CSS’의 특정 버튼을 필터링할 수 있습니다. Img(이미지), Media, Font, Doc(문서), WS(WebSocket), Wasm(WebAssembly), Manifest 및 Other.

  • 검색 버튼: 응답 내용을 검색할 수 있는 검색 패널을 엽니다.

다음은 요청 테이블에서 ‘div’를 검색하는 검색 패널입니다.

  • ‘로그 보존’ 확인란: 페이지 로드 시 요청을 저장하려면 ‘로그 보존’ 확인란을 선택합니다. 그렇지 않으면 각 페이지 로드에 대해 요청 테이블이 지워집니다. 성능 분석의 경우 일반적으로 페이지 로드 전반에 걸쳐 요청을 저장하는 것이 유용합니다.

  • ‘캐시 비활성화’ 확인란: 처음 사용자 경험을 에뮬레이트하려면 ‘캐시 비활성화’ 확인란을 선택합니다. 그렇지 않으면 반복 방문 시 브라우저 캐시에서 일부 요청이 제공됩니다.

  • 네트워크 조절 메뉴: 일반 네트워크 속도(‘조절 없음’) 외에 ‘빠른 3G’, ‘느린 3G’, ‘오프라인’ 및 기타 사용자 지정 연결 속도(예: ‘가장 느림’)를 에뮬레이션할 수 있습니다.

저장된 요청 분석

대상 요청을 기록하도록 요청 테이블을 구성했습니다. 요청을 어떻게 읽습니까?

위의 요청 테이블에는 다음 열이 표시됩니다.

  • ‘이름’: 리소스의 파일 이름 또는 식별자입니다.
  • ‘상태’: HTTP 상태 코드입니다. ‘100’-‘199’는 정보 응답, ‘200’-‘299’는 성공적인 응답, ‘300’-‘399’는 클라이언트 오류 응답, ‘500’-‘599’는 서버 오류 응답입니다. ‘200’ 상태는 ‘OK’이며 요청이 성공했음을 의미합니다.
  • 프로토콜: http/1.0, http/1.1, h2, h3 등과 같은 응용 프로그램 프로토콜
  • Type: document, stylesheet, script, font, png, jpeg 등과 같은 요청된 리소스의 MIME(Multipurpose Internet Mail Extensions) 유형입니다.
  • Initiator: 요청을 시작하는 객체/프로세스. 위의 요청 테이블에서 대부분의 요청은 인덱스 파일에 의해 시작됩니다.
  • ‘크기’: 서버에서 전달한 응답 헤더와 응답 본문을 합한 크기입니다.
  • 시간: 요청 시작부터 응답의 마지막 바이트 수신까지의 총 시간입니다.
  • ‘폭포’: 각 요청의 활동에 대한 시각적 분석입니다.

선택할 수 있는 열이 더 있으며 각 열을 정렬할 수 있습니다.

저장된 요청을 분석하면 애플리케이션이 어떻게 작동하는지 알 수 있습니다. 실패 및 오류가 발생한 호출을 보여줍니다. 클라이언트가 API 호출을 잘못 호출하거나 서버에 내부 오류가 발생하면 오류가 발생할 수 있습니다. 세부 사항은 요청 테이블을 한 줄씩 살펴보면 알 수 있습니다.

요청 라인을 클릭하면 요청이 표시되거나 재생됩니다. ‘Apache.jpg’ 요청은 깃털 이미지의 미리보기를 보여줍니다.

폭포식 활동은 요청이 대기열에 있는 시간, 대기 시간 및 콘텐츠를 다운로드하는 데 걸리는 시간을 보여줍니다.

  • Queueing: 우선 순위가 더 높은 요청이 있거나 이 출처에 대해 이미 6개의 TCP 연결이 열려 있을 때 브라우저가 요청을 대기열에 넣습니다. 이는 HTTP/1.0 및 HTTP/1.1에 대한 Chrome 제한입니다. 디스크 캐시에 공간을 할당합니다.
  • 대기(TTFB): 브라우저가 응답의 첫 번째 바이트를 기다리고 있습니다. TTFB는 첫 번째 바이트까지의 시간을 나타냅니다. 이 타이밍에는 1 왕복 지연 시간과 서버가 응답을 준비하는 데 걸리는 시간이 포함됩니다.
  • ‘콘텐츠 다운로드’: 브라우저가 네트워크 또는 서비스 작업자로부터 직접 응답을 수신하고 있습니다. 이 값은 응답 본문을 읽는 데 소요된 총 시간입니다. 값이 예상보다 크면 네트워크 속도가 느리거나 브라우저가 다른 작업을 수행하고 있어 응답 읽기가 지연될 수 있습니다.

조절 메뉴를 ‘Slow 3G’로 변경합니다. 처음 5초 동안 제목 이미지가 없습니다. 무슨 일이 일어난?

요청 테이블을 살펴보면 보류 중인 요청이 여러 개 있음을 알 수 있습니다. ‘Apache.jpg’에 대한 요청이 보류 중입니다. 이것이 이미지가 누락된 근본 과정입니다.

웹 페이지가 완전히 로드된 후 Apache.jpg에 대한 요청을 검사합니다. ‘Slow 3G’에서 이미지를 로드하는 데 ‘8.61초’가 걸렸습니다.

네트워크 패널 로그를 HAR 파일에 저장

이전 예제에서 요청 테이블이 UI 성능 문제를 분석하는 데 매우 효과적임을 확인했습니다.

http://www.qwerly.com/은 간단한 페이지입니다. Google Map for San Francisco를 시도하면 총 208개의 요청이 있으며 이는 브라우저에서 볼 수 있는 영역에서 볼 수 없습니다. 요청을 분석하는 데 더 많은 시간이 필요합니다.

실수로 창/탭을 닫으면 어떻게 됩니까?

모든 요청 로그를 잃게 됩니까?

솔루션은 요청 테이블을 HAR 파일에 저장하는 것입니다.

HAR은 HTTP 아카이브 형식을 나타냅니다. 웹 브라우저가 사이트와 상호 작용하는 방식을 기록하는 JSON 형식의 아카이브 파일 형식입니다. 이 유형의 파일에 대한 일반적인 확장자는 .har입니다.

요청 테이블을 마우스 오른쪽 버튼으로 클릭하면 메뉴가 표시됩니다. ‘콘텐츠와 함께 모두 HAR로 저장’을 선택하면 요청 로그가 저장됩니다.

마찬가지로 아래쪽 화살표를 사용하여 HAR 파일을 저장할 수 있습니다.

HAR 파일 보기

느린 UI에 대한 요청을 받아 HAR 파일에 저장했습니다.

다음은 Google 지도에서 가져온 HAR 파일의 예입니다.

파일에는 94,816줄이 있으며 처음 58줄을 표시했습니다. 다음은 JSON 트리입니다.

이 HAR 파일을 어떻게 분석할 수 있습니까?

HAR 파일을 보는 방법에는 여러 가지가 있습니다.

  • HAR 파일을 네트워크 패널에 업로드합니다.
  • 크롬 확장 프로그램을 사용하세요.
  • 온라인 HAR 파일 뷰어를 사용합니다.

네트워크 패널에 HAR 파일 업로드

HAR 파일은 네트워크 패널에서 저장되며 네트워크 패널로 다시 업로드할 수 있습니다.

네트워크 패널에서 HAR 파일을 끌어다 놓아도 됩니다.

여기에서 Chrome에서 저장한 HAR 파일을 Firefox 브라우저에 드롭할 수도 있습니다.

Chrome 확장 프로그램을 사용하여 HAR 파일 보기

Chrome에는 HAR 파일을 검사하는 유틸리티인 ‘HTTP 아카이브 뷰어’라는 확장 프로그램이 있습니다.

‘런치 앱’ 버튼을 클릭하면 3개의 탭이 있는 팝업 창이 실행됩니다. 첫 번째 탭은 HAR 파일을 로드하기 위한 것입니다. 파일을 페이지의 아무 곳에나 드롭하거나 파일 선택기로 선택하거나 텍스트 상자에 붙여넣을 수 있습니다.

파일이 로드되면 창이 ‘검사’ 탭으로 전환됩니다. 추가 분석에 사용할 수 있는 요청 외에도 뷰어는 로드된 각 HAR 파일에 대해 ‘페이지 타임라인’을 표시하거나 숨길 수 있습니다. 2개의 HAR 파일을 로드했습니다. 하나는 http://www.qwerly.com/용이고 다른 하나는 Google 지도용입니다. 타임라인 표시줄을 클릭하면 ‘통계 표시’ 패널에 포함/제외할 관련 요청을 선택/선택 취소할 수 있습니다. 아래 스크린샷에서 두 HAR 파일이 모두 선택되어 전송된 데이터에 대한 통계를 표시합니다.

세 번째 탭은 시청자에 대한 설명인 ‘정보’입니다.

온라인 HAR 파일 뷰어 사용

일부 온라인 HAR 파일 뷰어가 있으며 http://www.softwareihard.com/blog/har-viewer/는 Chrome 확장 프로그램인 ‘HTTP 아카이브 뷰어’와 유사하게 작동합니다.

처음 두 탭은 ‘HTTP Archive Viewer’의 처음 두 탭과 유사합니다. 세 번째 탭은 업로드된 HAR 파일의 JSON 트리를 보여줍니다.

결론

DevTools의 네트워크 패널을 사용하여 UI 성능을 분석하는 방법을 보여주었습니다. 요청 테이블은 HAR 파일로 저장할 수 있습니다. HAR 파일을 네트워크 패널에 다시 업로드하여 검사하거나 브라우저 확장 프로그램 또는 온라인 HAR 파일 뷰어로 표시 및 분석할 수 있습니다. 이 기술은 새로운 것은 아니지만 JavaScript 성능을 측정하고 병목 현상을 디버깅하는 가장 효과적인 방법 중 하나로 남아 있습니다.

읽어 주셔서 감사합니다. 도움이 되었기를 바랍니다. 관심이 있으시면 다른 Medium 기사를 확인하십시오.