Emotion.js与内联样式的性能对比及代码实现效率咨询

嘿，我来帮你拆解下这两种写法的效率和性能差异，给你做个实用参考～

先聊聊你用Emotion.js的写法 #

• 代码复用性拉满：你定义的common样式类可以重复用到任意元素上，不用每次创建新元素都复制一遍样式代码；后期要改样式的话，只需要修改common这一处就行，维护成本低很多。
• 渲染性能更优：Emotion会把编译后的样式注入到全局样式表中，浏览器处理类名样式时是批量解析的，相比逐个处理内联样式，这种方式能利用浏览器的样式优化机制——尤其是当页面有大量相同样式的元素时，性能差异会更明显。
• 扩展性强：Emotion支持完整的CSS特性，比如嵌套规则、媒体查询、伪类伪元素这些，内联样式根本做不到，这对复杂项目的样式逻辑来说太重要了。

对应的代码示例也很清晰：

import { css } from '@emotion/css';

const common = css`
  color: #ccc;
`;

const $div = document.createElement('div');
$div.classList.add(common);

再看内联样式的写法 #

• 代码冗余严重：每创建一个元素都要手动写一遍style属性的内容，样式完全没法复用，代码量会随着元素数量增加而暴涨。
• 渲染效率偏低：内联样式是直接绑定到单个元素上的，浏览器需要为每个元素单独计算样式，没法利用样式表的批量优化，元素越多，性能损耗越大。
• 功能局限性大：内联样式不支持伪类、媒体查询、CSS变量（仅部分受限支持）这些特性，只能写最基础的样式规则，复杂场景完全hold不住。

补全后的内联样式代码示例大概是这样：

const $div = document.createElement('div');
// 两种内联写法都可以
$div.innerHTML = `<div style="color: #ccc;"></div>`;
// 或者直接设置元素style属性
// $div.style.color = '#ccc';

给你的小建议 #

如果你的项目是长期维护的，或者需要用到复杂样式逻辑、样式复用，优先选Emotion.js的写法，不管是代码效率还是长期维护成本都更划算；如果只是给单个临时元素加个极简样式，内联样式确实省事，但从项目整体来看，Emotion的方案更可持续。

备注：内容来源于stack exchange，提问作者Taylous