Vuejs css 作用域性能

Question

我正在使用 VueJs 开发一个新的应用程序，我看到它实现了一个像这样的 "css scoped"

<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>

我要开发一个包含许多原子设计组件的大项目，我想问一下，为了性能，使用类还是使用作用域

更好？

Answer 1

不会影响性能。

css 解析时间与更复杂的过程（例如，parsing/interpreting js、渲染 html 等）相比绝对微不足道。

Answer 2

我认为从 CSSOM 的角度假设属性选择器不会影响性能是危险的。快速搜索一下，我找不到太多支持这一点的东西，但 Vue 的意图似乎很好，但最终结果可能会释放比不使用属性选择器时性能低得多的 CSS .

我认为这取决于您的应用程序的大小，您只需要进行基准测试即可。不过，作为基准，您不应该使用属性选择器，因为它们不太具体，因此浏览器需要付出更多的努力。

Answer 3

Scoped styles do not eliminate the need for classes. Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit. Here's a playground where you can test the differences yourself.

这里引用官方vue-loader文档，可以找到here

Vuejs css 作用域性能

Vuejs css scoped performance

javascript

css

atomic

vue.js