面试题：React与Vue框架下CSS组件化的性能优化策略

React性能优化策略

CSS - in - JS库优化
- 使用像Styled Components或Emotion这样的CSS - in - JS库时，利用其提供的缓存机制。例如，Styled Components会自动为相同样式的组件重用样式，避免重复生成CSS规则。通过合理组织样式逻辑，将共用的样式提取到单独的函数或变量中，使得这些库在生成样式时能够更高效地复用已有样式。
- 对于动态样式，尽量减少在渲染函数中频繁改变样式的情况。如果必须动态改变样式，可以通过使用类名切换的方式，结合CSS的媒体查询等特性，在CSS层面处理大部分样式变化，减少在JavaScript中频繁生成新样式对象的开销。
避免重复渲染
- 使用React.memo来包裹无状态组件，对于只依赖props的纯展示组件，React.memo会在props没有变化时阻止组件重新渲染，从而避免其内部样式的重复渲染。例如：
```
const MyComponent = React.memo((props) => {
  return <div style={{ color: props.color }}>{props.text}</div>;
});
```
- 对于父组件传递给子组件的样式相关props，确保这些props在父组件更新时不会不必要地改变。如果可能，将不变的样式相关逻辑提升到父组件的更高层级，避免在子组件每次渲染时重新计算样式。
CSS模块化与代码拆分
- 在使用CSS Modules时，确保将组件的CSS代码进行合理拆分。将不同功能或部分的样式分到不同的文件中，例如将基础样式、交互样式等分开。这样在组件更新时，只需要加载和渲染相关部分的样式，而不是整个组件的所有样式。
- 结合Webpack等构建工具，对CSS进行按需加载。例如，使用import()语法来动态导入CSS模块，只有在组件实际需要渲染时才加载相应的CSS，减少初始加载时的样式渲染压力。

Vue性能优化策略

Scoped CSS优化
- 在Vue组件中使用scoped CSS时，尽量减少嵌套层级。深嵌套的选择器会增加浏览器解析CSS的时间复杂度。例如，尽量使用直接子选择器>而不是后代选择器。
```
<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>
<style scoped>
.parent >.child {
    color: red;
  }
</style>
```
- 避免使用复杂的CSS选择器，如属性选择器和伪类选择器的过度嵌套。如果需要根据属性或状态改变样式，可以使用动态类名结合简单的CSS规则来实现。
避免重复渲染
- 使用Vue的computed属性来处理与样式相关的计算。例如，如果组件的样式依赖于某个数据的计算结果，可以将这个计算逻辑放到computed中。这样当依赖的数据变化时，computed属性会根据依赖关系进行缓存和更新，避免不必要的样式重新计算和渲染。
```
<template>
  <div :class="computedStyleClass">{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      value: 10,
      message: 'Hello'
    };
  },
  computed: {
    computedStyleClass() {
      return this.value > 5? 'large - text' : 'normal - text';
    }
  }
};
</script>
<style scoped>
.large - text {
    font - size: 20px;
  }
.normal - text {
    font - size: 16px;
  }
</style>
```
- 使用v - if和v - show合理控制组件的显示与隐藏。如果组件在某些条件下不显示，并且其样式渲染开销较大，可以使用v - if完全销毁组件及其相关样式，避免在隐藏状态下仍进行不必要的样式计算。如果组件频繁切换显示隐藏状态，v - show可能更合适，因为它只是通过CSS的display属性控制显示，不会重新渲染组件和样式。
CSS代码组织与优化
- 将共用的CSS样式提取到全局样式文件或单独的Mixin文件中。在Vue中，可以通过@import语句在组件中引入这些共用样式。例如，创建一个common.css文件存放全局通用样式，然后在组件的<style>标签中使用@import url('./common.css');引入。
- 对于动态样式，可以使用Vue的绑定语法v - bind:style来简洁地控制样式变化。同时，尽量减少v - bind:style中复杂的JavaScript表达式，将复杂的逻辑放到computed属性中处理，以提高性能。

星途面试题库

面试题：React与Vue框架下CSS组件化的性能优化策略

知识考点

面试题答案

React性能优化策略

Vue性能优化策略