성능 감사 : Firefox 개발자 도구 깊은 다이빙

Firefox 개발자 도구 (DevTools)에 대한 자세한 설명 : 웹 사이트 성능을 향상시키는 강력한 도구 이 기사는 개발자가 웹 사이트 및 웹 애플리케이션의 성능을 확인, 디버그, 분석 및 최적화 할 수 있도록 설계된 일련의 도구 인 심층적 인 Firefox Developer Tools (DevTools)를 탐색합니다. 우리는 성능 관련 도구에 중점을두고 DevTools 및 일부 실제 설정을 사용하는 방법에 대한 소개를 소개합니다. DevTools에 액세스하는 방법 :

내비게이션 도구 모음의 오른쪽에있는 햄버거 메뉴를 클릭하고 "웹 개발자"를 선택한 다음 사용하려는 하위 툴을 선택하십시오.

shift f5

(wind 도구.

페이지의 어느 곳에서나 마우스 오른쪽 버튼을 클릭하고 확인 요소를 선택하십시오.

키 포인트
• Firefox Web Developer Tools (DevTools)는 개발자가로드 타임 및 런타임 성능에 중점을 둔 웹 사이트 및 웹 응용 프로그램의 성능을 확인, 디버그, 분석 및 최적화하는 데 도움이되는 다양한 도구를 제공합니다. DevTools의 네트워크 모니터 도구를 사용하여 브라우저가 웹 페이지의 다른 리소스를 다운로드하는 데 걸리는 시간을 결정하고 웹 페이지가 천천히로드하거나 블록하는 요청을 찾을 수 있습니다. DevTools의 성능 도구는 개발자가 웹 UI 응답 성 및 JavaScript 코드 성능에 대한 통찰력을 제공하여 병목 현상 및 성능 문제를 식별 할 수 있도록 도와줍니다. 컬러 코드는 DevTools 차트 및 섹션에서 사용되어 개발자가 문제를 일으키는 작업 유형을 신속하게 발견하고 다른 관점을 전환 할 때 작업 유형을 추적 할 수 있도록 도와줍니다. Firefox의 DevTools는 구성 파일의 시간 프레임을 선택하거나 좁히는 것을 지원하므로 개발자는보다 자세한 분석을 위해 특정 활동주기에 집중할 수 있습니다.
DevTools 설정 Firefox DevTools에는 웹 콘솔에서 타임 스탬프를 활성화하거나 HTTP 캐싱을 비활성화하는 등 개발자가 경험을 사용자 정의 할 수있는 많은 옵션이 있습니다 (DevTool을 열 수있는 모든 페이지의 첫 번째로드 성능을 시뮬레이션하는 데 사용).
• DevTools 설정 패널에 액세스하는 방법 : 먼저 DevTools를 열었습니다
도구 모음에서 "설정"버튼을 클릭하십시오.

F1을 눌러 현재 도구 상단에 설정 패널을 표시합니다.

Ctrl Shift O

(Windows and Linux) 또는 cmd shift o
여기에서는 기본 도구, 도구 상자에 표시 할 버튼, 테마 (Dark-Light-Firebug) 및 기타 고급 설정을 선택할 수 있습니다.
• 성능 중심 도구 웹 응용 프로그램의 성능을 분석 할 때로드 시간 성능과 런타임 성능을 구별해야합니다.
시간을로드 시간 성능에 대한 답변 "어떤 리소스가 너무 길어지고 있습니까?" 런타임 성능을 다룰 때는 코드가 대부분의 시간을 소비하는 위치와 병목 현상의 원인을 확인하기 위해 런타임 성능을 처리 할 때 JavaScript 및 CSS (특히 CSS 애니메이션)에 중점을 두어야합니다.
• 네트워크 모니터 및 성능 도구를 살펴 보겠습니다.

네트워크 모니터

네트워크 모니터는 Firefox가 작성한 모든 네트워크 요청을 표 형식으로 표시합니다 (예 : 페이지로드 또는 XMLHTTPREQUESTS, API 요청 등). 는 또한 요청과 관련된 HTTP 헤더, HTTP 응답 및 쿠키를 표시 할 수 있으며 검색 할 수 있습니다. 이를 사용하여 현재 페이지로드의 성능 분석을 수행, 표시 및 저장할 수도 있습니다.

요컨대,이 도구는 브라우저가 웹 페이지의 다른 리소스를 다운로드하는 데 걸리는 시간을 결정하는 데 사용될 수 있습니다.

이 도구를 사용하여 웹 페이지가 느리거나 차단 된 요청을 모니터링하고 찾을 수도 있습니다. 네트워크 패널은 메인 이벤트 (DomContentLoaded 및 Load)가 트리거 될 때를 보여줍니다.

요청 타임 라인 네트워크 목록의 각 요청에는 리소스가로드 된 총 시간과 같이 요청과 관련된 타이밍 정보를 표시하는 타임 라인 열이 포함되어 있습니다.

DevTools는 DomContentLoaded 및 Page Loading과 같은 보고서의 주요 수명주기 이벤트를 표시합니다. Blue는 DomContentLoaded 이벤트가 트리거 된 시간을 나타냅니다.

domcontentloaded 및로드 이벤트

CSS 스타일 시트, 이미지 및 프레임 워크를 제외하고 HTML 문서가 완전히로드되고 구문 분석 될 때 domcontentloaded 이벤트 화재.

HTML 문서와 관련된 모든 스타일 시트, 이미지 및 프레임이 완전히로드 될 때 로드 이벤트가 발생합니다.

요청 세부 정보 요청 목록을 클릭 한 후에는 헤더, 매개 변수, 응답, 타이밍 및 보안과 같은 다양한 탭이있는 오른쪽 디테일 창을 볼 수 있습니다.

성능을 위해 타이밍 정보에 특별한주의를 기울일 것입니다.

네트워크 타이밍 이 창에는 각 요청과 관련된 많은 타이밍 메트릭이 있습니다.

차단 된 네트워크 연결이 대기열에 있기를 기다리는 데 소요되는 시간입니다.

> 보내는 것은 요청을 서버로 보내는 데 걸리는 시간입니다. 수신은 서버로부터 응답을받는 데 걸리는 시간이거나 (캐시 된 경우) 캐시에서 읽는 데 걸리는 시간입니다.

대기는 클라이언트가 첫 바이트를 받기 전에 기다리는 총 시간입니다. WebPagetest.org 또는 Chrome의 DevTools와 같은 다른 성능 분석 도구에서는이를 TTFB 또는 첫 바이트라고합니다.

DNS 해상도도 있습니다. 이는 서버 호스트 이름을 해결하는 데 걸리는 시간과 TCP 연결을 열는 데 걸리는 시간입니다.

로드 시간 성능을 분석하는 방법

네트워크 모니터는 웹 페이지의로드 시간 성능을 분석하는 데 사용할 수있는 성능 분석 도구를 통합합니다.

로드 시간 성능 분석을 시작하려면 다음과 같습니다

하단의 상태 표시 줄에서 "분석"아이콘을 클릭하십시오.
• 네트워크 모니터가 켜져있을 때 페이지를 다시로드하거나 네트워크 요청을 발행합니다 (실제로로드 시간 성능 분석없이 요청에 대한 테이블 정보 만 표시됩니다).

최종 보고서에는 유형별로 수신 된 리소스에 대한 파이 차트와 해당 테이블이 표시됩니다 : JavaScript, CSS, 이미지 및 글꼴 등과 다음 세부 사항이 포함 된 요약.

캐시 응답 수 총 요청 수 크기 전송 크기 로딩 시간

웹 페이지는 빈 캐시와 채워진 캐시로 테스트됩니다.

첫 번째 로딩 성능
• Firefox의 DevTools는 두 가지 다른 상황에서 웹 애플리케이션의 성능을 분석 할 수 있습니다.
캐시 없음, 첫 번째 액세스가 첫 번째 액세스 일 때 자산이 캐시되지 않은 상황을 시뮬레이션합니다.
• 캐시가 있으며 두 번째 액세스를 시뮬레이션합니다. 브라우저는 앱의 자산을 캐시하여 서버를 오가는 많은 라운드 트립을 제거했습니다.
• DevTools가 모든 탭에서 열릴 때 웹 페이지의 첫 번째로드를 시뮬레이션하기 위해 비활성화 캐시 설정을 사용하여 웹 페이지의 첫 번째로드를 시뮬레이션 할 수도 있습니다.
JavaScript 성능 및 응답 성
• JavaScript는 단일 스레드입니다. 즉, 브라우저가 코드를 동기로 실행하지만 HTML5 웹 워크러 (다중 스레드 JavaScript의 표준 API) 덕분에 다른 스레드에서도 코드를 실행할 수 있습니다.
이 단일 스레드는 레이아웃 렌더링, 컴퓨팅 스타일 및 가비지 컬렉션과 같은 브라우저가 수행하는 모든 작업을 실행하는 데 책임이 있습니다.
• 또한 Settimeout, Click 및 Load와 같은 이벤트 및 리소스 획득과 같은 이벤트는 단일 스레드에 의해 실행됩니다. (실제로이 작업은 비동기식으로 실행되지만 JavaScript의 비동기식은 다릅니다. 이벤트 중심 메소드, 이벤트 루프 및 대기열을 사용하여 시뮬레이션됩니다.) 우수한 성능과 응답 성은 JavaScript의 비동기 모델에 기인하지만 장기 실행 기능은 성능 저하와 UI 응답 성이 좋지 않을 수 있습니다.

성능 도구 성능 도구를 사용하면 웹 페이지 UI 응답 성 (사용자 상호 작용에 대한 응답) 및 JavaScript 코드 성능에 대한 통찰력을 제공하여 웹 페이지에서 병목 현상 및 성능 문제를 발견 할 수 있습니다.

성능 도구를 사용하여 시작 및 중지 버튼을 제어하여 현재 열린 웹 페이지의 성능 분석을 시작하여 제어 할 수 있습니다. 그런 다음이 도구에는 브라우저가 수행하는 작업의 요약 및 테이블 및 그래픽보기가 표시됩니다. 성능 도구를 사용하여 단일 스레드를 차단하는 장기 실행 코드 스 니펫을 찾고 감지 할 수 있습니다.

성능 도구를 사용하는 방법

성능 도구 사용 단계는 매우 간단합니다.

웹 페이지를 열고 성능 패널을 열고 성능 기록을 시작하십시오.
• 몇 초 동안 기다렸다가 분석 중에 페이지와 상호 작용 한 다음 기록을 중단하십시오.
장기 실행 기능이나 이벤트를 찾아 FPS 기간이 낮습니다.
• 추가 최적화를 목표로 할 수있는 활동을 찾으면 다른 하위 툴을 사용하여 조치를 취할 위치에 대한 자세한 정보를 얻을 수 있습니다.
• 분석 중에 일부 사용자 상호 작용 시나리오를 따르고 응용 프로그램 UI의 여러 부분, 특히 최적화하려는 부분과 상호 작용하십시오. 또한 불필요한 추가 작업을 피하십시오. 예를 들어,보고 된 결과에 더 많은 노이즈를 추가하므로 분석하려고하지 않는 부품과 상호 작용하지 마십시오.
시간 범위를 선택하십시오 Firefox의 DevTools는 구성 파일의 시간 프레임을 선택하거나 좁히는 것을 지원합니다. 타임 라인 또는 FPS 차트 섹션을 클릭하고 마우스를 드래그하여 시간을 선택할 수 있습니다. 드래그를 중지 한 후 DevTools는 다른 뷰 및 차트를 업데이트하여 해당 기간 동안 발생한 이벤트 정보 만 표시합니다.

fps 차트 프레임 속도 차트는 녹음 중에 초당 프레임 수를 표시합니다. 녹음이 실행될 때이 차트는 실시간 값을 갖는 FPS 미터 역할을합니다.

FPS 차트는 분석 시간에 대한 최대 FPS 최대, 최소 및 평균 FPS 값을 표시합니다. 이 모든 값은 성능 병목 현상이 있는지 빠르게 알 수 있습니다.

애니메이션을 실행하는 경우 FPS는

60 fps 이어야합니다. 이 값이 왜 그렇게 중요한지 알아 보려면이 비디오를보십시오 :

이 차트를 사용하여 시각적 차이 (충돌) 및 심각한 프레임 속도 방울 (브라우저의 성능 병목 현상)을 나타내는 불일치를 빠르게 발견 할 수 있습니다.

폭포 사진 Wikipedia는 폭포 다이어그램을 다음과 같이 해석합니다

데이터 시각화 형태는 순서대로 도입 된 양수 또는 음수 값의 누적 효과를 이해하는 데 도움이됩니다. 공중에서 막대 차트 (벽돌)의 명백한 서스펜션으로 인해 폭포 차트를 비행 벽돌 차트 또는 마리오 차트라고도합니다.

사진 소스 성능 도구의 경우 폭포 다이어그램은 브라우저가 수행하는 활동의 고장과 다음과 같은 브라우저 별 이벤트를 보여줍니다.

레이아웃 렌더링 또는 레이아웃 요소 (재 배열이라고도 함)
• 스타일 애니메이션 프레임 요청

리 페인트 또는 픽셀 드로잉

• 쓰레기 수집 등
레이아웃 작업 또는 재 배열 및 스타일 계산은 비싸므로 최적화의 잠재적 영역 일 수 있습니다. 자세한 내용은이 Google 기사를 참조하십시오.
• 다음은 샘플 응용 프로그램의 폭포 다이어그램의 스크린 샷입니다.
• 호출 트리 뷰
트리 뷰를 호출하면 브라우저가 대부분의 시간을 소비하는 JavaScript 기능뿐만 아니라 총 활동 시간, 자체 시간 및 총 분석 시간에 비해 비율과 같은 중요한 메트릭을 보여줍니다.

소유의 시간은 호출하는 함수에 관계없이 작업에 의해서만 소비 된 시간을 말합니다.

총 시간은 운영에 소요 된 시간과 호출하는 기능을 나타냅니다.

콜 트리는 브라우저가 녹음하는 동안 대부분의 시간을 소비하는 기능 (집계)을 통계적으로 알려줍니다.

JS 불꽃 맵 화염 그래프는 분석 중에 JavaScript 통화 스택의 불꽃 그래프를 표시합니다. Flame 다이어그램은 Brendan Gregg가 만든 성능 시각화 유형입니다.

화염 맵은 대부분의 핫스팟 코드 경로를 빠르고 정확하게 식별 할 수 있습니다.

스택 막대 차트는 CPU에 직접 존재하는 상위 작업이 하단 작업을 호출 함을 의미합니다.

당신은 여기에서 불꽃 다이어그램에 대한 자세한 내용을 읽을 수 있습니다.

프레임 속도와 JavaScript 불꽃 그래프, 폭포 그래프 및 통화 트리 뷰를 사용하여 성능 문제를 찾고 최적화 해야하는 특정 기능을 찾을 수 있습니다.

화염 그래프는 기록 된 특정 시점에서 특정 함수에 대한 호출 스택 상태를 보여줍니다.

화염 그래프에는 많은 데이터가 포함되어 있으므로 의미있는 판독 값을 얻으려면 몇 밀리 초를 선택할 때까지 확대해야합니다.

색상 코드 다른 차트와 섹션은 동일한 색상을 사용하여 동일한 유형의 운영 및 자산 (자바 스크립트, CSS, 렌더링, 드로잉 등)을 색상 코딩합니다.

색상을 사용하여 다양한 뷰로 작업을 구별하고 문제를 일으키는 작업 유형을 빠르게 발견하며 다른 뷰 각도를 전환 할 때 작업 유형을 추적 할 수 있습니다.

이 메뉴를 통해 차트와보기에서보고 싶은 개별 활동을 필터링 할 수 있습니다. 여기서 다른 작업과 관련된 다양한 색상을 볼 수 있습니다.

예를 들어 CSS 애니메이션을 사용하는 경우 재 계산 스타일, 스타일 변경, 레이아웃 및 드로잉 적용과 같은 활동에 중점을 두어야합니다. 다른 활동을 필터링하여 소음을 줄일 수 있습니다.

JavaScript의 경우 기능 호출, HTML을 구문 분석 및 XML에 중점을 두어야합니다.

결론 이 기사에서는 Firefox의 DevTools를 시작하는 방법과 다양한 성능 관련 서브 툴을 사용하는 방법을 배웠습니다. Firefox의 DevTools는 매우 포괄적이며 Firefox의 최근 성능 업그레이드를 통해 웹 사이트 렌더링 중에 실제 문제 영역을 정확하게 식별 할 수 있습니다. 우리는 당신이 용어에 익숙해지고 무엇을 찾아야하는지 알면 스스로 더 많은 것을 탐구하는 것이 좋습니다.

faqs (faq) Firefox 개발자 도구에서 성능 감사의 목적은 무엇입니까?

Firefox 개발자 도구의 성능 감사는 개발자가 웹 애플리케이션의 성능을 실시간으로 이해하도록 설계되었습니다. 로드 시간, 렌더링 속도 및 JavaScript 실행과 같은 다양한 성능 메트릭에 대한 통찰력을 제공합니다. 이러한 메트릭을 분석하여 개발자는 병목 현상을 식별하고 코드를 최적화하며 전반적인 사용자 경험을 향상시킬 수 있습니다.

Firefox Developer Edition에서 성능 도구에 액세스하는 방법은 무엇입니까?

Firefox Developer Edition의 성능 도구에 액세스하려면 개발자 도구 패널을 열어야합니다. 웹 페이지의 어느 곳에서나 마우스 오른쪽 버튼을 클릭하고 확인 요소를 선택하면이 작업을 수행 할 수 있습니다. 그런 다음 성능 탭을 클릭하십시오. 여기에서 웹 응용 프로그램의 성능을 분석하기 위해 새로운 녹화를 시작할 수 있습니다.

Firefox Developer Edition과 일반 Firefox 브라우저의 차이점은 무엇입니까?

Firefox Developer Edition은 웹 개발자를 위해 특별히 설계된 Firefox 버전입니다. 여기에는 고급 성능 감사 도구, CSS 그리드 및 JavaScript 디버거와 같은 일반 Firefox 브라우저에서는 찾을 수없는 다양한 도구와 기능이 포함되어 있습니다. 이러한 도구는 개발자가 웹 응용 프로그램을보다 효율적으로 구축, 테스트 및 디버깅하는 데 도움이 될 수 있습니다.

Firefox의 Pagespeed Insights 애드온을 사용하는 방법은 무엇입니까?

Firefox의 Pagespeed Insights 추가 기능은 웹 페이지 성능을 쉽게 분석하는 방법을 제공합니다. 애드온을 설치 한 후 Firefox 도구 모음에서 액세스 할 수 있습니다. 분석하려는 페이지의 URL을 입력하면 추가 기능이 개선 제안을 포함하여 성능에 대한 자세한 보고서를 제공합니다.

Firefox의 Archi FPS 미터 추가 기능은 무엇입니까?

Firefox의 Archi FPS 미터 애드온은 웹 응용 프로그램의 프레임 속도를 측정 할 수있는 도구입니다. 이는 특히 웹 기반 게임 또는 애니메이션에서 성능 문제를 식별하는 데 매우 유용합니다. 애드온은 Firefox 도구 모음에서 현재 프레임 속도를 표시하므로 실시간으로 성능을 모니터링 할 수 있습니다.

Firefox의 올인원 페이지 스피드 테스트 애드온을 사용하는 방법은 무엇입니까?

Firefox의 올인원 페이지 스피드 테스트 애드온은 웹 페이지 성능에 대한 포괄적 인 분석을 제공합니다. 애드온을 설치 한 후 Firefox 도구 모음에서 액세스 할 수 있습니다. 분석하려는 페이지의 URL을 입력하면 추가 기능이로드 시간, 페이지 스피드 점수 및 개선 제안을 포함한 자세한 보고서를 제공합니다.

Firefox 개발자 도구를 사용하여 웹 애플리케이션의 성능을 향상시키는 방법은 무엇입니까?

Firefox 개발자 도구는 웹 애플리케이션의 성능을 향상시키는 여러 가지 방법을 제공합니다. 성능 탭을 사용하여 코드에서 병목 현상, 네트워크 탭을 식별하여로드 시간을 분석하여 스크립트를 최적화하기위한 JavaScript 디버거를 식별 할 수 있습니다. 또한 PagesPeed Insights 애드온은 개선을위한 특정 제안을 제공 할 수 있습니다.

Firefox 개발자 도구를 사용하여 모바일 웹 애플리케이션의 성능을 분석 할 수 있습니까?

예, Firefox 개발자 도구에는 다양한 화면 크기와 해상도를 시뮬레이션 할 수있는 반응 형 설계 패턴이 포함되어 있습니다. 이는 모바일 웹 응용 프로그램의 성능을 분석하고 모든 장치에서 우수한 사용자 경험을 제공하는 데 매우 유용합니다.

Firefox 개발자 도구를 사용하여 어떤 일반적인 성능 문제를 식별 할 수 있습니까?

Firefox 개발자 도구로 식별 할 수있는 일반적인 성능 문제에는 로딩 시간이 느리게, 렌더링 효율이 낮고 과도한 JavaScript 실행이 포함됩니다. 이러한 문제로 인해 사용자 경험이 나빠질 수 있으므로 개발 프로세스 초기에 이러한 문제를 식별하고 해결하는 것이 중요합니다.

성능 감사를 위해 Firefox 개발자 도구 사용에 대해 더 많이 배우는 방법은 무엇입니까?

성능 감사를 위해 Firefox 개발자 도구 사용에 대해 더 많이 배우는 데 도움이되는 많은 리소스가 있습니다. Mozilla Developer Network는 상세한 안내서 및 자습서를 포함하여 도구의 모든 측면에 대한 포괄적 인 문서를 제공합니다. 또한 많은 온라인 커뮤니티와 포럼이 있으며 다른 개발자와 질문을하고 경험을 공유 할 수 있습니다.

위 내용은 성능 감사 : Firefox 개발자 도구 깊은 다이빙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!