Kayce Basques
Chrome 및 DevTools를 사용하여 메모리 누수, 메모리 팽창, 빈번한 가비지 컬렉션 등 페이지 성능에 영향을 미치는 메모리 문제를 찾는 방법을 알아보세요.
요약
- Chrome 작업 관리자를 사용하여 페이지에서 사용 중인 메모리 양을 확인합니다.
- 타임라인 녹화로 시간 경과에 따른 메모리 사용량을 시각화합니다.
- 힙 스냅샷을 사용하여 분리된 DOM 트리 (메모리 누출의 일반적인 원인)를 식별합니다.
- 할당 타임라인 녹화 파일을 사용하여 JS 힙에 새 메모리가 할당되는 시점을 확인합니다.
- JavaScript 참조에 의해 유지되는 분리된 요소를 식별합니다.
개요
RAIL 성능 모델의 정신에 따라 성능 개선 노력의 초점은 사용자여야 합니다.
메모리 문제는 사용자가 인식할 수 있는 경우가 많으므로 중요합니다. 사용자는 다음과 같은 방식으로 메모리 문제를 인식할 수 있습니다.
- 시간이 지남에 따라 페이지의 성능이 점점 저하됩니다. 이는 메모리 누수의 증상일 수 있습니다. 메모리 누수는 페이지의 버그로 인해 시간이 지남에 따라 페이지에서 점점 더 많은 메모리를 사용하게 되는 경우를 말합니다.
- 페이지의 실적이 지속적으로 나쁩니다. 이는 메모리 팽창의 증상일 수 있습니다. 메모리 팽창은 페이지가 최적의 페이지 속도에 필요한 것보다 더 많은 메모리를 사용하는 경우를 말합니다.
- 페이지 실적이 지연되거나 자주 일시중지되는 것처럼 보입니다. 이는 잦은 가비지 컬렉션의 증상일 수 있습니다. 가비지 컬렉션은 브라우저가 메모리를 회수하는 것입니다. 브라우저에서 이 시점을 결정합니다. 수집 중에는 모든 스크립트 실행이 일시중지됩니다. 따라서 브라우저에서 가비지 컬렉션을 많이 실행하면 스크립트 실행이 자주 일시중지됩니다.
메모리 팽창: '너무 많음'의 기준은 무엇인가요?
메모리 누수는 쉽게 정의할 수 있습니다. 사이트에서 점점 더 많은 메모리를 사용한다면 누수가 있는 것입니다. 하지만 메모리 팽창은 파악하기가 조금 더 어렵습니다. '메모리를 너무 많이 사용'하는 경우는 무엇인가요?
기기와 브라우저마다 기능이 다르기 때문에 정확한 수치는 없습니다. 고급형 스마트폰에서는 원활하게 실행되는 페이지가 저가형 스마트폰에서는 비정상 종료될 수 있습니다.
여기서 중요한 점은 RAIL 모델을 사용하고 사용자에게 집중하는 것입니다. 사용자에게 인기 있는 기기를 파악한 다음 해당 기기에서 페이지를 테스트합니다. 환경이 지속적으로 좋지 않다면 페이지가 해당 기기의 메모리 용량을 초과하는 것일 수 있습니다.
Chrome 작업 관리자로 실시간 메모리 사용량 모니터링
Chrome 작업 관리자를 메모리 문제 조사의 시작점으로 사용하세요. 작업 관리자는 페이지에서 사용 중인 메모리 양을 알려주는 실시간 모니터입니다.
Shift+Esc를 누르거나 Chrome 기본 메뉴로 이동하여 도구 더보기 > 작업 관리자를 선택하여 작업 관리자를 엽니다.