이 페이지는 Cloud Translation API를 통해 번역되었습니다.

스타일 계산의 범위와 복잡성 줄이기

Jeremy Wagner

Paul Lewis

JavaScript는 종종 시각적 변화를 유발합니다. 때로는 스타일 조작을 통해 직접 변경되거나, 때로는 계산을 통해 변경되기도 합니다. 데이터 검색 또는 정렬과 같은 시각적 변화를 초래합니다. 타이밍이 나쁘거나 오래 실행되는 JavaScript는 성능 문제의 일반적인 원인이 될 수 있으므로 가능한 한 그 영향을 최소화하는 방법을 찾아야 합니다

스타일 계산

요소 추가 및 제거, 속성 및 클래스 변경, 애니메이션을 재생하면 브라우저가 요소 스타일을 다시 계산하고 많은 경우 페이지의 일부 또는 전체의 레이아웃입니다. 이 프로세스를 스타일 계산

브라우저가 스타일 계산을 시작하고자 하는 경우 주어진 요소에 적용할 클래스, 의사 선택기 및 ID를 결정합니다. 그런 다음 일치하는 선택기의 스타일 규칙을 처리하여 요소의 최종 스타일을 지정합니다.

상호작용 지연 시간에서 스타일 재계산의 역할

다음 페인트에 대한 상호작용 (INP)은 사용자 중심 런타임입니다. 사용자 입력에 대한 페이지의 전반적인 응답성을 평가하는 성능 측정항목입니다. 사용자가 페이지와 상호작용한 시점부터 페이지와 상호작용한 시점부터 페이지가 실행될 때까지의 상호작용 지연 시간을 측정합니다. 브라우저는 사용자 인터페이스입니다.

상호작용의 중요한 구성요소는 다음 상호작용을 그리는 데 걸리는 시간입니다. 있습니다. 다음 프레임을 표시하기 위해 수행되는 렌더링 작업은 많은 부분으로 구성되며 레이아웃, 페인트, 작업 직전에 발생하는 페이지 스타일 계산을 비롯한 작업을 합성할 수 있습니다. 이 가이드에서는 스타일 계산 비용에 중점을 두지만 상호작용의 총 렌더링 시간 중 일부가 지연 시간을 최소화합니다

선택기의 복잡성 줄이기

CSS 선택자를 단순화하면 페이지의 스타일을 더 빠르게 계산할 수 있습니다. 가장 간단한 선택기는 클래스 이름만 있는 CSS의 요소를 참조합니다.

.title {
  /* styles */
}

하지만 프로젝트가 커지면 더 복잡한 CSS가 필요하게 되어 다음과 같은 선택기로 변경할 수 있습니다.

.box:nth-last-child(-n+1) .title {
  /* styles */
}

이러한 스타일이 페이지에 적용되는 방식을 결정하려면 브라우저가 '이것은 클래스의 상위 요소인 title 클래스가 있는 요소인가요? box는 상위 요소의 빼기 n번째-+-1 하위 요소인가요? 파악 중 브라우저에 시간이 걸릴 수 있습니다. 이를 간소화하기 위해 선택자를 보다 구체적인 클래스 이름으로 지정합니다.

.final-box-title {
  /* styles */
}

대체 클래스 이름이 어색해 보일 수 있지만 브라우저의 훨씬 간단해집니다. 예를 들어 이전 버전에서는 브라우저가 요소는 해당 유형의 마지막 요소이며, 먼저 요소에 대한 모든 것을 알아야 합니다. 그 뒤에 오는 요소가 다른 요소를 포함할 수 있는지 여부를 nth-last-child이어야 합니다. 이는 다른 컴퓨팅 리소스를 사용하는 것보다 계산 비용이 클래스 이름만을 기준으로 선택기를 요소와 일치시킴

스타일이 지정되는 요소 수 줄이기

또 다른 성능 고려사항(선택자보다 중요한 경우가 많음) 복잡도 - 요소가 변경될 때 발생해야 하는 작업의 양입니다.

일반적으로 계산된 요소 스타일을 계산하는 데 드는 최악의 비용은 은 요소 수에 선택기 수를 곱한 값입니다. 왜냐하면 브라우저가 각 요소를 모든 스타일에 대해 적어도 한 번은 검토하여 일치하지 않습니다.

스타일 계산은 일부 요소를 무효화하는 대신 직접 타겟팅할 수 있습니다. 전체 페이지 최신 브라우저에서는 이러한 문제가 덜 발생하는 경향이 있는데, 브라우저가 변경사항이 영향을 미칠 수 있는 모든 요소를 항상 확인할 필요는 없습니다. 반면 이전 브라우저는 이러한 작업에 항상 최적화되어 있지는 않습니다. 위치 무효화되는 요소의 수를 줄여야 합니다.

스타일 재계산 비용 측정

스타일 재계산 비용을 측정하는 방법에는 있습니다. 각 옵션은 브라우저에서 광고를 측정할지 여부에 따라 이 프로세스가 얼마나 오래 지속되었는지를 측정하려는 경우 실제 사용자 경험을 파악하는 데 도움이 됩니다

Chrome DevTools에서 스타일 재계산 비용 측정

스타일 재계산 비용을 측정하는 한 가지 방법은 패널을 닫습니다. 시작하려면 다음 단계를 따르세요.

DevTools를 엽니다.
성능 탭으로 이동합니다.
선택기 통계 체크박스를 선택합니다 (선택사항).
녹화를 클릭합니다.
페이지와 상호작용합니다.

녹화를 중지하면 다음과 같은 이미지가 표시됩니다.

상단의 스트립은 시간 단위당 프레임 수도 표시하는 소형 Flame Chart입니다. 둘째, 활동이 스트립 하단에 가까울수록 더 빠르게 브라우저가 프레임을 그리는 중입니다. Flame Chart가 수평이 아니라 위에 빨간색 막대가 있는 경우 실행할 수 있습니다

확대 중
채워진 애플리케이션의 활동 요약에서 Chrome DevTools의 문제 영역을
성능 패널을 살펴봤습니다. — DevTools 활동에서 오래 실행되는 프레임 요약해 줍니다.

스크롤과 같은 상호작용 중 장기 실행되는 프레임은 가까이서 보는 것이 좋습니다. 보여드리겠습니다 큰 보라색 블록이 표시되면 활동을 확대하고 원하는 항목을 선택합니다. 스타일 다시 계산이라는 라벨이 지정된 작업을 하여 잠재적으로 스타일 재계산에 대한 자세한 내용을 다시 계산하지 않아도 됩니다.

장기 실행 스타일 계산에 대한 세부정보,
스타일 재계산 작업의 영향을 받는 요소의 양으로 계산됩니다. — 오랜 시간이 걸리는 방식의 재계산은 25ms 이상입니다.

이벤트를 클릭하면 호출 스택이 표시됩니다. 만약 렌더링 작업이 스타일 변경을 트리거한 자바스크립트를 호출합니다. 또한 변경사항이 영향을 미치는 요소의 수(900여 개)도 보여 줍니다. 요소 및 스타일 계산에 걸린 시간이 포함됩니다. 이 정보를 사용하여 코드에서 수정 사항을 찾으려고 시도할 수 있습니다.

선택기 통계 체크박스를 선택한 경우 Performance 패널 설정에서 트레이스를 실행한 다음 하단 추적의 패널에는 같은 이름의 추가 탭이 있습니다.

CSS 선택자 통계 표
Chrome DevTools의 성능 패널에 나타납니다. 이 표에는
헤더 및 해당 데이터(예: 경과 시간, 일치,
시도 횟수, 일치 항목 수, 일치하지 않는 노드의 비율, 선택기
확인할 수 있습니다. — </ph> Chrome의 성능 패널에 표시된 선택 통계 표 DevTools를 사용할 수 있습니다.

이 패널에는 각 선택 도구의 상대적 비용에 대한 유용한 데이터가 나와 있어 비용이 많이 드는 CSS 선택자를 식별할 수 있습니다.

자세한 내용은 CSS 선택자 통계 문서를 참조하세요.

실제 사용자의 스타일 재계산 비용 측정

첫 번째 모델에서 스타일 재계산이 발생하는 데 걸리는 시간이 궁금하다면 Long Animation Frames API를 사용해 보세요. 이를 수행하는 데 필요한 도구를 제공합니다. 이 API의 데이터는 web-vitals 자바스크립트 라이브러리 스타일 재계산 시간 등이 포함됩니다.

상호작용의 프레젠테이션 지연이 가장 큰 원인으로 의심되는 경우 INP에 기여한 항목을 평가하려면 이 시간이 얼마나 소요되는지 파악해야 합니다. 시간을 절약할 수 있습니다. 자세한 내용은 필드에서 스타일 재계산 시간을 측정하는 방법을 참조하세요.

리소스

Markus Spiske의 Unsplash 히어로 이미지