스타일 재계산 이벤트 중에 CSS 선택자 성능 분석

Sofia Emelianova

Performance 패널은 각 장기 실행 작업을 오른쪽 상단에 빨간색 삼각형으로 표시하고 Summary 탭에 경고를 표시하여 기본 스레드의 작업 중 실행 시간이 오래 걸리고 성능이 느린 작업을 나타냅니다.

공연 기록에서 이러한 장기 실행 작업 중 일부가 Recalculate Style 이벤트일 수 있습니다. 스타일 재계산 이벤트는 브라우저가 다음을 수행하는 데 걸리는 시간을 추적합니다.

• 페이지에서 DOM 요소를 반복하여 특정 요소와 일치하는 모든 CSS 스타일 규칙을 찾습니다.
• 일치하는 CSS 스타일 규칙에 따라 각 요소의 실제 스타일을 계산합니다.

CSS 스타일은 다음과 같이 CSS 규칙의 적용 가능성이 변경될 때마다 다시 계산해야 합니다.

• DOM에 요소가 추가되거나 삭제됩니다.
• 클래스 또는 ID 속성의 값과 같은 요소의 속성이 변경됩니다.
• 사용자가 마우스 이동 또는 요소 포커스 변경과 같은 입력을 하면 :hover 규칙에 영향을 줄 수 있습니다.

오래 실행되는 Recalculate Style 이벤트를 찾았다면 Selector Stats 탭을 사용하여 가장 많은 시간이 걸리고 성능을 저하시키는 CSS 선택자를 파악할 수 있습니다.

선택기 통계 탭에는 실적 기록 내에서 하나 이상의 Recalculate Style 이벤트와 관련된 CSS 규칙 선택기에 대한 통계가 표시됩니다.

Selector 통계를 사용 설정하여 성능 트레이스 기록

장기 실행되는 Recalculate Style 이벤트 중에 CSS 규칙 선택기의 통계를 보려면 Selector Stats 캡처 설정을 사용 설정하여 성능 트레이스를 기록합니다.

도움말: 선택자 통계는 실적 기록에 더 많은 오버헤드를 추가하기 때문에 기본적으로 사용 중지되어 있습니다. 스타일 재계산 이벤트 및 기타 렌더링 정보의 성능을 검사해야 하는 경우에는 사용 설정된 상태로 두세요.

선택기 통계로 성능 트레이스를 기록하려면 다음 안내를 따르세요.

1. 사진 갤러리 데모 페이지와 같은 웹페이지를 엽니다.

2. DevTools를 열고 Performance 패널로 이동합니다.

3. 실적 패널에서 설정 캡처 설정 버튼을 클릭하고 check_box CSS 선택기 통계 사용을 선택합니다.

   

4. radio_button_checked 기록을 클릭하고 개선하려는 시나리오를 실행한 다음, radio_button_checked 중지를 클릭합니다.

그런 다음, 다음 섹션에 설명된 대로 CSS 선택자 통계를 확인합니다.

단일 이벤트에 대한 CSS 규칙 선택기 통계 보기

단일 Recalculate Style 이벤트와 관련된 CSS 규칙 선택기의 통계를 보려면 다음 단계를 따르세요.

1. 선택기 통계를 사용 설정하여 성능 트레이스를 기록합니다.

2. 공연 기록에서 Recalculate Style 이벤트를 찾아 클릭합니다.

3. Performance 패널 하단 섹션에서 Selector Stats 탭을 엽니다.

선택자 통계 탭의 CSS 선택자 표

선택자 통계 탭에는 CSS 선택자 표가 포함되어 있습니다. 표에는 각 CSS 선택자에 대한 다음 정보가 표시됩니다.

열	설명
경과 시간 (밀리초)	브라우저에서 이 CSS 선택자를 일치시키는 데 소요된 시간입니다. 이 시간은 밀리초 (ms) 단위로 표시되며 1밀리초는 1/1000초입니다.
일치 시도	브라우저 엔진이 이 CSS 선택자와 일치시키려고 한 요소의 수입니다.
일치 항목 수	브라우저 엔진이 이 CSS 선택자와 일치시킨 요소의 수입니다.
느린 경로 불일치 비율	브라우저 엔진이 일치시키려고 한 요소 중 이 CSS 선택자와 일치하지 않은 요소의 비율입니다. 브라우저 엔진이 일치를 위해 최적화되지 않은 코드를 사용해야 했습니다.
선택기	일치하는 CSS 선택자입니다.
스타일 시트	CSS 선택자가 포함된 CSS 스타일 시트입니다.

완료되면 실적 패널에서 설정 설정 캡처를 열고 check_box CSS 선택기 통계 사용을 선택 해제합니다.

여러 이벤트의 CSS 규칙 선택기 통계 보기

여러 스타일 재계산 이벤트와 관련된 CSS 규칙 선택기의 집계 통계를 보려면 여러 개의 선택자 통계 표를 다음과 같이 스프레드시트에 복사합니다.

1. 선택기 통계를 사용 설정하여 성능 트레이스를 기록합니다.

2. 관심이 있는 첫 번째 스타일 재계산 이벤트를 찾아 클릭합니다.

3. Performance 패널 하단 섹션에서 Selector Stats 탭을 엽니다.

4. 선택기 통계 표를 마우스 오른쪽 버튼으로 클릭하고 표 복사를 선택합니다.

   

5. 표를 Google 스프레드시트와 같은 스프레드시트에 붙여넣습니다.

6. 관심 있는 다른 스타일 재계산 이벤트로 이전 단계를 반복합니다.

완료되면 실적 패널에서 설정 설정 캡처를 열고 check_box CSS 선택기 통계 사용을 선택 해제합니다.

전체 기록에 대한 CSS 규칙 선택기 통계 집계 보기

전체 실적 기록과 관련된 CSS 규칙 선택기의 집계 통계를 보려면 다음 단계를 따르세요.

1. 선택기 통계를 사용 설정하여 성능 트레이스를 기록합니다.

2. Flame Chart의 빈 영역을 클릭하면 선택 가능한 이벤트를 모두 선택 해제할 수 있습니다.

3. 전체 녹화 범위를 선택합니다. 이렇게 하려면 Performance(성능) 패널 상단의 CPU 차트를 더블클릭합니다.

4. Performance 패널 하단 섹션에서 Selector Stats 탭을 엽니다. 상단에 모든 선택기의 총계에 대한 데이터가 포함된 새 행이 표시됩니다.

완료되면 실적 패널에서 설정 설정 캡처를 열고 check_box CSS 선택기 통계 사용을 선택 해제합니다.

CSS 선택자 통계 분석

선택기 통계 표의 데이터를 오름차순 또는 내림차순으로 정렬하려면 열 헤더를 클릭합니다. 예를 들어 가장 많은 시간을 차지하는 CSS 선택자를 확인하려면 경과 시간 (밀리초) 열 헤더를 클릭합니다.

웹페이지의 성능을 개선하려면 다음과 같은 CSS 선택자를 중점적으로 살펴봅니다.

• 계산하는 데 시간이 오래 걸렸습니다 (높은 경과 (ms) 값).
• 브라우저가 여러 번 일치를 시도한 경우 (높은 Match Attempts 값).
• 브라우저에서 실제로 많은 요소와 일치하지 않은 경우 (Match Attempts 값에 비해 Match Count 값이 낮음)
• 느린 경로 일치하지 않는 항목의 비율이 높습니다.

예를 들어 이전 스크린샷에서 다음을 확인할 수 있습니다.

• 첫 번째 CSS 선택자 (html body .ps[tooltip...)에 가장 많은 시간이 필요했습니다.
• 브라우저 엔진이 이 CSS 선택자 일치를 1104회 시도했지만 일치하는 요소가 없습니다.

따라서 이 CSS 선택자가 개선이 필요한 첫 번째 대상입니다.

계산 시간이 단축되고 페이지에서 더 적은 수의 요소와 일치하도록 CSS 선택자를 변경해 보세요. CSS 선택자를 개선하는 방법은 구체적인 사용 사례에 따라 다릅니다.

이 튜토리얼의 단계를 반복하여 경과 (밀리초) 열의 스타일 재계산 이벤트 시간을 줄이는 데 변경사항이 도움이 되었는지 확인합니다.

참고: 이 페이지의 일부는 Microsoft에서 제작하여 공유한 저작물을 수정한 것이며 크리에이티브 커먼즈 저작자 표시 4.0 국제 라이선스에 설명된 약관에 따라 사용되었습니다. 원본 페이지는 마이클 호프만, 패트릭 브로스셋, 조 마틴, 조허 가디알리를 포함한 Microsoft Edge팀에서 작성했습니다.