Style 계산의 범위, 복잡성 줄이기

https://web.dev/articles/reduce-the-scope-and-complexity-of-style-calculations?hl=ko

• INP(Interaction to Next Paint)는 사용자 입력에 대한 페이지의 전반적인 응답성을 평가하는 사용자 중심의 런타임 성능측정 항목.
• 상호작용의 중요한 구성요소는, 다음 프레임을 그리는데 걸리는 시간
  • 다음 프레임을 표시하기 위해 실행되는 렌더링 작업은 레이아웃, 페인트, 합성 작업 직전에 발생하는 페이지 스타일 계산을 비롯한 많은 부분으로 구성된다.

CSS Selector 의 복잡성 줄이기

• css selector 의 이름을 단순화하면, 페이지 스타일 계산 속도를 높일 수 있다.

.title{
   /*styles*/   
}

• 그러나 아래와 같이 복잡해진다면?

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

• 브라우저는 '이 상위 요소가 box 클래스의 빼기 n번째 +1 하위요소인 title 클래스가 있는 요소인가요?'라고 물어봐야함

• 사용하는 selector는 물론, 사용하는 브라우저에 따라 시간이 오래 걸릴 수 있다.

• 따라서 이를 단순화 하기위해서 클래스 이름으로 변경하면 좋음.

• 따라서 BEM 과 같은 명명 규칙을 사용하면 좋다. (모든 항목에 단일 클래스를 부여하고, 계층구조가 필요한 경우에 이 계층 구조도 클래스이름에 통합되니까!)