내가 VueJs으로 새로운 응용 프로그램을 개발하고 있어요을 범위와 나는이Vuejs CSS는 성능
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
처럼이
<style>
.example[_v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" _v-f3f3eg9>hi</div>
</template>
처럼 내가 갈거야 렌더링 "CSS는 범위"그 구현 참조 원자력 디자인에 많은 구성 요소가있는 큰 프로젝트를 개발하고 클래스를 사용하거나 범위를 사용하는 것이 더 나은지 궁금합니다.
범위 지정 스타일을 사용하면 클래스가 필요하지 않습니다.. 브라우저가 다양한 CSS 선택기를 렌더링하는 방식 때문에 범위를 지정할 때 (즉, 속성 선택자와 결합 할 때) p {color : red}는 이 여러 번 느려질 수 있습니다 (). 예를 들어 .example {color : red}와 같이 클래스 나 ID를 대신 사용하면 성능 저하를 거의 없앨 수 있습니다. Here's a playground 어디에서 직접 차이를 테스트 할 수 있습니다.
이 here
성능에 영향을 미치지 않습니다.
더 복잡한 프로세스 (예 : 구문 분석/해석 js, 렌더링 html 등)와 비교할 때 CSS 구문 분석 시간은 절대적으로 중요하지 않습니다.
속성 선택기가 CSSOM 관점에서 성능에 영향을주지 않는다고 가정하는 것은 위험합니다. 빠른 검색을 통해이 사실을 뒷받침 할 수는 없지만 Vue의 의도는 훌륭하지만 최종 결과는 속성 선택자를 사용하지 않은 경우보다 실적이 낮은 CSS를 출시 할 가능성이 있습니다.
나는 앱의 크기에 따라 벤치마킹해야한다고 생각합니다. 그러나 기본으로, 특성 선택기가 덜 구체적이므로 브라우저를 대상으로 약간 더 많은 노력을 기울여야하므로 속성 선택기를 사용하지 않아야합니다.
난 항상이 가정했지만 상당히 크기 VUE 응용 프로그램에서 일부 실제 숫자를 볼 것이 좋을 것이다 찾을 수 있습니다 공식
vue-loader문서를 인용하는 것입니다. –