저자 : Basinwang, Tencent PCG 프론트 엔드 개발 엔지니어
대규모 프로젝트는 성능 문제가 발생하기 쉬우 며 일반적으로 성능 병목 현상이 발생하면 그에 따라 분석을 시작합니다. 분석 방향은 비즈니스 자체의 특성뿐만 아니라 문제를 찾기위한 일반적인 도구와도 관련이 있습니다. 이 기사에서는 주로 프론트 엔드 성능 분석이 어떻게 진행되는지 소개합니다 ~
프런트 엔드 성능 분석 도구 (Chrome DevTools)
일반적으로 프런트 엔드의 성능 분석은 일반적으로 시간 과 공간 의 두 가지 관점 에서 수행 할 수 있습니다 .
시간 : 페이지로드 시간, 렌더링 시간, 네트워크 시간, 스크립트 실행 시간 등과 같이 일반적으로 시간이 많이 소요됩니다.
공간 : CPU 점유, 메모리 점유, 로컬 캐시 점유 등을 포함한 리소스 점유
이제 어떤 공통 도구를 빌려서 사용할 수 있는지 살펴 보겠습니다. 웹 페이지는 기본적으로 브라우저에서 실행되기 때문에 대부분의 도구는 기본적으로 브라우저 자체에서 제공되며 선호되는 도구는 당연히 Chrome DevTools 입니다. 이 기사에서는 주로 설명 할 Chrome DevTools에 중점을 둡니다.
등대
Lighthouse 의 전임자는 Chrome DevTools 패널의 감사였습니다. Chrome 60 이전 버전에서는이 패널에 네트워크 사용량과 페이지 성능이라는 두 가지 측정 카테고리 만 포함되었습니다. Chrome 60부터 감사 패널은 Lighthouse의 통합 버전으로 대체되었습니다. 최신 버전의 Chrome에서는 Lighthouse 확장 프로그램을 별도로 설치하여 사용하거나 스크립트를 통해 사용할 수 있습니다.
건축물
다음은 Lighthouse의 구성 요소입니다.
드라이버 : Chrome 디버깅 프로토콜 과 상호 작용하는 인터페이스
수집기 (수집기) : 드라이버를 사용하여 페이지 정보를 수집합니다. 수집기의 출력을 아티팩트라고합니다.
감사 : Artifact를 입력으로 사용하여 감사자는 이에 대해 테스트를 실행 한 다음 합격 / 불합격 / 점수 결과를 할당합니다
보고서 : 검토 결과를 사용자 중심 보고서 (예 : 모범 사례)로 그룹화하고 부품에 가중치 합계를 적용한 다음 점수를받습니다.
주요 기능
Lighthouse는 크기와 네트워크 속도가 다른 장치와 같은 일련의 테스트를 통해 웹 페이지를 실행합니다. 또한 페이지에서 색상 대비 및 ARIA 모범 사례와 같은 접근성 지침과의 일관성을 확인합니다.
비교적 짧은 시간 내에 Lighthouse는 다음과 같은 보고서를 제공 할 수 있습니다 (보고서는 JSON 또는 HTML로 생성 될 수 있음).
이 보고서는 성능 , 접근성 , 모범 사례 , 검색 엔진 최적화 및 PWA의 5 가지 측면에서 페이지를 분석합니다 . 성능을 위해 몇 가지 일반적인 시간 소모적 인 통계가 제공됩니다. 또한 몇 가지 세부 최적화 방향이 제공됩니다.
단기간에 웹 사이트를보다 포괄적으로 평가하려면 Lighthouse를 사용하여 점수를 실행하고 일반적인 최적화 방향을 결정할 수 있습니다.
성능 패널
성능 패널에는 타임 라인 이라는 이전 버전도 있습니다 . 이 패널은 페이지가로드 될 때가 아니라 실행 중일 때 페이지의 성능 인 런타임 성능 을 기록하고 분석하는 데 사용됩니다 .
사용 단계
성능 패널에는 많은 기능이 있으며 특정 분석은 별도로 논의 할 수 있습니다. 여기에서 사용 된 단계에 대해 간략하게 설명합니다.
시크릿 모드에서 Chrome을 엽니 다. 시크릿 모드는 Chrome이 깨끗한 상태에서 실행되도록합니다. 예를 들어 브라우저 확장 프로그램은 성능 평가에 영향을 미칠 수 있습니다.
DevTools에서 "Performance"탭을 클릭하고 몇 가지 기본 구성을 수행합니다 (자세한 내용은 공식 지침 참조 ).
지시에 따라 녹음을 클릭하여 녹음을 시작합니다. 해당 작업을 완료 한 후 중지를 클릭합니다.
페이지가 실행 중일 때 DevTools는 성능 메트릭을 캡처합니다. 기록을 중지 한 후 DevTools는 데이터를 처리 한 다음 성능 패널에 결과를 표시합니다.
주요 기능
Performance 사용법에 대한 많은 기사가 있으며 인터넷을 검색하여 찾을 수 있습니다. 일반적으로 다음과 같은 기능이 주로 사용됩니다.
FPS 차트 확인 : FPS 위에 빨간색 막대가 표시되면 프레임 속도가 너무 낮아 사용자 경험에 해를 끼칠 수 있음을 의미합니다. 일반적으로 녹색 막대가 높을수록 FPS가 높아집니다.
CPU 차트보기 : CPU 차트는 FPS 차트 아래에 있습니다. CPU 차트의 색상은 성능 보드 하단의 요약 탭에 해당합니다.
플레임 그래프 확인 : 플레임 그래프는 내부 CPU 분석을 시각적으로 보여 주며 가로축은 시간, 세로축은 콜 포인터, 콜 스택의 상단 기능은 하단에 있습니다. JS 분석기가 활성화되면 플레임 그래프에 호출 된 각 JavaScript 함수가 표시되어 특정 함수를 분석하는 데 사용할 수 있습니다.
Check Buttom-up : 특정 기능이 성능에 가장 큰 영향을 미치는 것을 확인할 수 있으며, 이러한 기능의 호출 경로를 확인할 수 있습니다.
특정 성능 병목 지점을 찾는 방법에 대한 자세한 내용은 여기에서 자세히 설명하지 않을 공식 문서 시리즈를 참조 할 수 있습니다.
퍼포먼스 모니터
Chrome 콘솔을 연 후 키 조합 ctrl + p(Mac 단축키 :)을 누르고를 command + p입력 > Show Performance Monitor하면 성능 모니터를 열 수 있습니다. 주요 모니터링 지표는 다음과 같습니다.
CPU usage : CPU 점용 율
JS 헤드 크기 : JS 메모리 사용량 크기
DOM 노드 : 메모리에 탑재 된 DOM 노드 수
JS 이벤트 리스너 : 이벤트 리스너 수
... : 기타 등
대부분의 경우 성능 최적화를 수행 할 때 위의 도구 중 일부는 일반적인 최적화 방향을 결정하는 데 충분합니다. 자세한 내용과 사례는 여기에서 자세히 설명하지 않습니다.
프런트 엔드 성능 모니터링
특정 성과 분석 및 포지셔닝 외에도 종종 비즈니스 성과를 모니터링해야합니다. 프런트 엔드 성능 모니터링에는 Synthetic Monitoring (SYN)과 Real User Monitoring (RUM)의 두 가지 방법이 있습니다.
종합 모니터링
종합 모니터링은 시뮬레이션 시나리오에서 성능 감사를 위해 페이지를 제출하고, 일련의 도구와 규칙을 통해 페이지를 실행하고, 일부 성능 지표를 추출하고, 감사 보고서를 얻는 것입니다. 예를 들어 위에서 설명한 Lighthouse는 합성 모니터링입니다.
합성 모니터링에 대한 사용 시나리오는 많지 않으며 일반적으로 개발 및 테스트 프로세스에 나타날 수 있습니다. 예를 들어 성능 문제를 찾을 때 파이프 라인 실행 성능 보고서 및 로컬 실행 단순 작업 분석과 결합됩니다. 이 접근 방식의 장점은 분명합니다.
Chrome 디버깅 프로토콜 과 결합하여 얻은 데이터 와 같은 더 풍부한 데이터 표시기를 수집하는 기능
보다 성숙한 솔루션 및 도구, 저렴한 비용
실제 사용자의 성능 경험에 영향을주지 않습니다.
실제 사용자 모니터링
실제 사용자 모니터링은 사용자가 당사 페이지를 방문하는 것을 의미하며 방문 후 다양한 성과 지표가 생성됩니다. 사용자 방문이 끝나면 데이터 추출, 정리 및 처리를 위해 이러한 성능 지표를 로그 서버에 업로드하고 마지막으로 모니터링 플랫폼에 표시하는 프로세스를 수행합니다.
프런트 엔드 모니터링에 대해 이야기 할 때 대부분은 실제 사용자 모니터링을 포함합니다. 일반적인 성능 모니터링에는 로딩 시간, DOM 렌더링 시간, 인터페이스 시간 소모적 인 통계 등이 포함됩니다. 페이지 로딩 프로세스의 경우 여러 단계로 정의되어 있음을 알 수 있습니다.
우리가해야 할 일은 가능한 한 관리, 계산, 수집 및보고를 수행하는 것입니다.이 프로세스에는 종종 Performance Timeline API를 사용해야합니다. 필요한 데이터를 서버로 보낸 후 데이터를 처리하고 마지막으로 시각화 및 기타 방법을 통해 모니터링합니다. 따라서 실제 사용자 모니터링은 비즈니스 자체의 프런트 엔드 아키텍처 설계와 함께 구축해야하는 경우가 많으며 그 이점은 이해하기 더 쉽습니다.
시뮬레이션 비용을 뺀 실제 장면을 완전히 복원
데이터 샘플은 개인차를 부드럽게하기에 충분합니다.
수집 된 데이터는 더 많은 시나리오의 분석 및 최적화에 사용될 수 있습니다.
합성 모니터링과 비교하여 실제 사용자 모니터링은 일부 시나리오 (예 : CPU가 차지하고 메모리가 많은 경우)에서 더 많은 성능 분석 데이터를 얻을 수 없으므로 더 많은 경우 최적화 효과로 사용됩니다. 이러한 경우 특정 분석 및 포지셔닝은 여전히 종합 모니터링에 의존해야 할 수 있습니다.
그러나 실제 사용자 모니터링도 장점이 있습니다. 예를 들어 TCP 및 DNS 연결은 시간이 너무 많이 걸리고 다양한 환경에서 실행 시간이 많이 걸리는 일부 문제는 종합 모니터링에서 찾기가 어렵습니다.
성능 분석 자동화
개발 과정에서 종종 성능 분석을 수행해야합니다. 프런트 엔드의 성능 분석은 시작하는 데 저렴한 비용이 아닙니다. 기본 페이지로드 시간과 네트워크 시간 소모 외에도 앞서 소개 한 성능 패널, FPS, CPU 및 플레임 그래프와 함께보다 구체적인 포지셔닝을 분석해야하는 경우가 많습니다.
이 영역이 자동화 방향으로 발전하고 싶다면 어떻게해야할까요?
등대 사용
또한 사용할 스크립트를 제공하는 Lighthouse를 이전에 소개했습니다. 따라서 자동화 된 작업을위한 스크립트를 실행하고 Lighthouse를 사용하여 분석 보고서를 실행하고 과거 데이터를 비교하여 기능 변경 및 성능 최적화와 같은 시나리오에서 성능 회귀를 수행 할 수 있습니다.
Lighthouse 사용의 장점은 개발 비용이 저렴하다는 것입니다. 공식 구성 에 따라 필요한 일부 데이터 만 조정하고 확보하면되고 Lighthouse의보다 포괄적 인 성능 분석 기능에 빠르게 액세스 할 수 있습니다.
그러나 Lighthouse는 또한 CDP (Chrome DevTools Protocol)를 기반으로하기 때문에 구현 비용을 줄이는 것 외에도 CDP에없는 일부 기능도 누락됩니다.
Chrome DevTools 프로토콜
Chrome DevTools 프로토콜을 사용하면 타사에서 Chrome 기반 웹 애플리케이션을 감지, 검사, 디버그 및 분석 할 수 있습니다. 이 계약을 통해 Chrome 데이터를 얻기위한 자체 도구를 개발할 수 있습니다.
Chrome DevTools 프로토콜 이해
Chrome DevTools 프로토콜은 WebSocket을 기반으로하며 WebSocket을 사용하여 DevTools와 브라우저 커널을 연결하는 빠른 데이터 채널을 설정합니다.
우리가 사용하는 Chrome DevTools는 실제로 웹 애플리케이션입니다. DevTools를 사용할 때 브라우저 커널 Chromium 자체가 서버 역할을하며 브라우저 디버깅 도구 인터페이스는 Websocket을 통해 Chromium과 통신합니다. 설립 과정은 다음과 같습니다.
DevTools는 웹 애플리케이션 역할을하고 Chromium은 연결을 서버로 제공합니다.
HTTP를 통해 HTML, JavaScript 및 CSS 파일을 추출합니다.
리소스가로드 된 후 DevTools는 브라우저와 Websocket 연결을 설정하고 JSON 메시지 교환을 시작합니다.
마찬가지로, DevTools를 사용하여 Windows, Mac 또는 Linux 컴퓨터에서 Android 장치의 실시간 콘텐츠를 원격으로 디버깅 할 때이 프로토콜이 사용됩니다. Chromium이 --remote-debugging-port=0플래그로 시작되면 Chrome DevTools 프로토콜 서버가 시작됩니다.
Chrome DevTools 프로토콜 도메인 분할
Chrome DevTools 프로토콜에는 페이지, 서비스 워커 및 확장 프로그램과 같은 브라우저의 다양한 부분과 상호 작용하기위한 API가 있습니다. 프로토콜은 서로 다른 작업을 서로 다른 도메인으로 나누고 각 도메인은 서로 다른 기능 모듈을 담당합니다. 예를 들어 DOM, Debugger, Network, Console및 Performance등 개발자 도구 상이한 기능 모듈로서 이해 될 수있다.
이 프로토콜을 사용하여 다음을 수행 할 수 있습니다.
예를 들면 일반적으로 사용되는 등 JS 취득 런타임 데이터
window.performance와window.chrome.loadTimes()등자동 성능 분석을위한 수집
Network및Performance데이터Puppeteer 의 CDPSession을 사용 하면 브라우저와의 프로토콜 통신이 더 쉬워집니다.
성능 관련 도메인
이 기사에서는 성능 분석에 대해 설명하므로 여기서는 성능과 관련된 도메인에만 집중합니다.
1. 성능. Performance도메인 에서 Performance.getMetrics()얻을 수있는 런타임 성능 표시기는 다음과 같습니다.
Timestamp: 취한 측정 샘플의 타임 스탬프Documents: 페이지의 문서 수Frames: 페이지의 프레임 수JSEventListeners: 페이지의 이벤트 수Nodes: 페이지의 DOM 노드 수LayoutCount: 페이지 레이아웃의 전체 또는 일부의 총 수RecalcStyleCount: 총 페이지 스타일 재 계산 수LayoutDuration: 모든 페이지 레이아웃의 결합 된 기간RecalcStyleDuration: 모든 페이지 스타일 재 계산의 총 기간ScriptDuration: JavaScript 실행 기간TaskDuration: 브라우저에서 수행하는 모든 작업의 결합 된 기간JSHeapUsedSize: 사용 된 JavaScript 스택 크기JSHeapTotalSize: JavaScript 스택의 전체 크기
2. 추적. Tracing도메인은 페이지로드의 DevTools 성능 추적을 얻을 수 있습니다. Chrome DevTools 또는 타임 라인 뷰어에서 열 수있는 추적 파일을 사용 Tracing.start하고 Tracing.stop만들 수 있습니다.
생성 된 JSON 파일이 다음과 같은 것을 볼 수 있습니다.
이러한 JSON 파일은 DevTools 타임 라인 뷰어에 던져 질 수 있으며 해당 타임 라인 및 플레임 그래프를 볼 수 있습니다.
3. 런타임. Runtime도메인은 원격 평가 및 미러링 개체를 통해 JavaScript의 런타임을 노출합니다. Runtime.getHeapUsageJavaScript 스택의 사용량을 가져오고, Runtime.evaluate전역 객체의 표현식을 계산하고 Runtime.queryObjects, JavaScript 스택 을 반복하고, 주어진 프로토 타입이있는 모든 객체를 찾아서 JavaScript 메모리 누수 를 측정 할 수 있습니다. ).
위의 것 외에도 Network분석 할 수있는 네트워크 관련 성능이 있으며 DOM 노드, JS 실행 등을 포함 할 수있는 기타 데이터 분석 등을 직접 연구해야 할 수도 있습니다.
자동화 된 성능 분석
Chrome DevTools 프로토콜을 사용하면 네트워크 데이터, 성능 데이터 및 런타임 데이터를 포함하여 DevTools에서 제공하는 많은 데이터를 얻을 수 있습니다.
이 프로토콜을 사용하는 방법과 관련하여 많은 위대한 신들은 Node.js, Python, Java 등을 포함하여이 프로토콜에 대해 다른 언어로 라이브러리를 이미 캡슐화 했으며 필요에 따라 awesome-chrome-devtools 프로젝트 에서 찾을 수 있습니다 .
우리가 얻을 수있는 데이터의 종류와 달성 할 수있는 자동화 정도에 대해서는이 기사에서 언급하지 않고 나중에 자세히 기사를 열겠습니다.
참고
Tencent 글로벌 디지털 생태 컨퍼런스가 다가옵니다!
포스터 아래에있는 QR 코드를 스캔하여 예약하세요.