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

Sofia Emelianova

Performance(성능) 패널에는 각 장기 실행 작업이 오른쪽 상단에 빨간색 삼각형이 있고 Summary(요약) 탭에 경고가 표시되어 실행 시간이 오래 걸리고 성능이 느린 기본 스레드의 작업을 나타냅니다.

성능 기록에서 이러한 장기 실행 작업 중 일부는 ReCalculate Style 이벤트일 수 있습니다. ReCalculate Style 이벤트는 브라우저에서 다음을 수행하는 데 걸리는 시간을 추적합니다.

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

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

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

장시간 실행되는 ReCalculate Style 이벤트는 성능에 문제가 될 수 있으며 웹사이트의 Interaction to Next Paint (INP)에 대한 상호작용에 영향을 미치는 긴 프레젠테이션 지연의 원인이 될 수 있습니다. 오랫동안 실행되는 스타일 다시 계산 이벤트를 발견하면 선택자 통계 탭을 사용하여 어떤 CSS 선택자가 가장 많은 시간을 들이고 성능을 저하하는지 파악할 수 있습니다.

선택자 통계 탭에는 실적 기록 내 하나 이상의 스타일 재계산 이벤트와 관련된 CSS 규칙 선택기에 대한 통계가 표시됩니다.

선택자 통계를 사용 설정한 상태에서 성능 트레이스 기록

장기간 실행되는 스타일 재계산 이벤트 중에 CSS 규칙 선택자의 통계를 보려면 선택자 통계 캡처 설정을 켠 상태로 실적 추적을 기록하세요.

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

선택자 통계를 사용하여 실적 추적을 기록하려면 다음 단계를 따르세요.

1. 웹페이지(예: 사진 갤러리 데모 페이지)를 엽니다.

2. DevTools를 열고 Performance(성능) 패널로 이동합니다.

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

   

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

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

단일 이벤트의 CSS 규칙 선택기 통계 보기

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

1. 선택자 통계를 사용 설정한 상태에서 성능 트레이스를 기록합니다.

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

3. 실적 패널 하단 섹션에서 선택기 통계 탭을 엽니다.

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

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

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

완료되면 성능 패널에서 설정 설정 캡처를 열고 체크박스 CSS 선택자 통계 사용을 선택 해제합니다.

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

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

1. 선택자 통계를 사용 설정한 상태에서 성능 트레이스를 기록합니다.

2. 관심 있는 첫 번째 ReCalculate Style 이벤트를 찾아 클릭합니다.

3. 실적 패널 하단 섹션에서 선택기 통계 탭을 엽니다.

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

   

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

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

완료되면 성능 패널에서 설정 설정 캡처를 열고 체크박스 CSS 선택자 통계 사용을 선택 해제합니다.

전체 녹음 파일의 CSS 규칙 선택기 집계 통계 보기

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

1. 선택자 통계를 사용 설정한 상태에서 성능 트레이스를 기록합니다.

2. 선택 가능한 이벤트를 선택 해제하려면 Flame Chart의 빈 영역을 클릭합니다.

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

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

완료되면 성능 패널에서 설정 설정 캡처를 열고 체크박스 CSS 선택자 통계 사용을 선택 해제합니다.

CSS 선택자 통계 분석

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

웹페이지의 성능을 개선하려면 다음과 같은 CSS 선택자에 집중하세요.

• 계산하는 데 시간이 오래 걸렸습니다 (높은 경과 (밀리초) 값).
• 브라우저에서 일치를 여러 번 시도한 값입니다 (높은 일치 시도 값).
• 브라우저에서 실제로 많은 요소를 일치시키지 못한 결과입니다 (Match Attempts 값에 비해 낮은 Match Count 값).
• 느린 경로 불일치 비율이 높습니다.

예를 들어 이전 스크린샷의 경우 다음과 같습니다.

• 첫 번째 CSS 선택자 (html body .ps[tooltip...)에 가장 많은 시간이 필요합니다.
• 브라우저 엔진이 이 CSS 선택자와 일치시키려고 1, 104회 시도했으나 일치하는 요소가 없습니다.

따라서 이 CSS 선택자가 가장 먼저 개선해야 할 대상입니다.

페이지에서 더 적은 수의 요소를 계산하고 일치시키는 데 소요되는 시간을 줄일 수 있도록 CSS 선택자를 변경해 보세요. CSS 선택자를 개선하는 방법은 특정 사용 사례에 따라 다릅니다.

이 튜토리얼의 단계를 반복하여 경과 시간 (밀리초) 열의 스타일 재계산 이벤트 기간이 단축되었는지 확인합니다.

참고: 이 페이지의 일부는 Microsoft에서 제작 및 공유한 저작물을 수정한 것이며 크리에이티브 커먼즈 저작자 표시 4.0 국제 라이선스에 설명된 약관에 따라 사용되었습니다. 원본 페이지는 Michael Hoffman, Patrick Brosset, Joe Martin, Zoher Ghadyali를 포함한 Microsoft Edge팀에서 작성했습니다.