Javascript Vuejs css作用域性能

我正在用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>

.示例[_v-f3eg9]{
颜色：红色；
}
你好

---

我将开发一个包含原子设计中许多组件的大型项目，我想问的是，为了性能，使用类还是使用作用域是更好的，因为它不会影响性能

---

与更复杂的过程（例如，解析/解释js、呈现html等）相比，css解析时间将是绝对微不足道的。

我认为假设属性选择器不会从CSSOM的角度影响性能是危险的。做一个快速搜索，我找不到太多的支持，但看起来Vue的意图很好，但最终结果可能会释放出比不使用属性选择器时性能差得多的CSS

我认为这取决于你的应用程序的大小，你只需要对其进行基准测试。不过，作为基线，您不应该使用属性选择器，因为它们不太具体，因此浏览器需要花费更多的精力才能找到目标

范围样式并不能消除对类的需求。由于浏览器呈现各种CSS选择器的方式，p{color:red}在限定范围时（即与属性选择器组合时）将慢很多倍。如果改用类或ID，例如在.example{color:red}中，那么实际上可以消除这种性能影响。在那里你可以自己测试差异

---

这是引用可以找到的官方

vue加载程序

文档

我一直假设这一点，但如果能从大小适中的vue应用程序中看到一些实际数字，那就太好了。官方文档中引用了这一点，但这是真的吗？我试着用Firefox在操场上玩，并没有注意到不同规则之间的差异。