内联样式在js动态渲染中不一定比class快，多数情况下反而更慢；频繁修改单个属性（如elem.style.left）会触发重排，而切换classname或classlist.toggle()通常只变更类名，浏览器可批量优化。
内联样式在JS动态渲染中真比class快吗
不一定快，多数情况下反而更慢。关键看操作频率和读写模式：频繁修改单个属性（如 elem.style.left）会触发重排；而切换 className 或 classList.toggle() 通常只涉及类名变更，浏览器可批量优化。
常见错误现象：for (let i = 0; i 每次赋值都可能强制同步布局计算，动画卡顿明显。
- 高频更新推荐用
elem.style.transform = 'translateY(42px)'，现代浏览器对 transform 属性做了独立图层优化，不触发布局 - 避免在循环里读取
elem.style.xxx—— 它只返回你手动设过的值，不是真实生效样式 - 要读真实值，用
getComputedStyle(elem).top，但注意它会强制 layout，别在 requestAnimationFrame 里反复调 - 批量写样式时，优先用
elem.setAttribute('style', 'top:10px;left:20px;opacity:0.8')一次性提交，减少重排次数
为什么 element.style.color 读不到外部CSS设的值
element.style 是一个 CSSStyleDeclaration 对象，只存显式设置的内联值，不包含继承、计算或外部规则结果。这是设计使然，不是 bug。
比如你写了 <div class="btn"></div> 并在 CSS 里定义 .btn { color: red; }，那么 div.style.color 返回空字符串，而非 "red"。
- 想获取最终生效颜色，必须用
getComputedStyle(div).color - 但
getComputedStyle()是“强读”，会同步触发 layout 计算，性能代价高 - 如果只是要判断是否可见，用
div.offsetParent !== null更轻量 - 需要多个布局值（如 width/height/top/left）时，用
div.getBoundingClientRect()一次取全，比多次getComputedStyle省得多
服务端渲染中 style 属性该不该用
该用，但仅限不可替代的首屏关键样式，比如骨架图占位尺寸、主题色变量注入、或根据设备宽度计算出的初始 transform 值。
错误做法是把整页样式逻辑塞进 style 属性，或用它模拟响应式断点——style 不支持 @media，也不注册 CSS 自定义属性到 CSSOM。
- 合理场景：
，配合后续 JS 或 CSS 变量消费 - 不合理场景：
style="font-size: 14px; @media (min-width:768px) { font-size: 16px; }"→ 后半段被浏览器直接丢弃 - SSR 输出带哈希的 critical CSS（如 Emotion）不算“原始内联”，它有去重和提取机制，和手写
style属性性质不同 - 注意：服务端每次输出不同
style值，会削弱 Brotli 压缩率和 HTTP/2 多路复用效率
哪些元素加 style 属性根本没用
所有不参与渲染的 HTML 元素，加 style 都会被浏览器静默忽略，比如 <meta>、<link>、<script></script>、<title></title>，甚至 本身。
典型误用：给 <link rel="stylesheet"> 加 style="display:none" 想隐藏它，结果毫无效果——因为 <link> 不是视觉元素，不进渲染树。
- 真正能用
style的，只有进入渲染树的容器型元素：<div>、<code><p></p>、<span></span>、<header></header>、<section></section>等 -
<svg></svg>和<canvas></canvas>支持style，但内部子元素（如<circle></circle>）也得单独加，不能靠父级继承 - 语义化标签如
<article></article>虽技术上支持，但滥用会模糊关注点，应优先走 class + 外部 CSS
实际项目中最容易被忽略的，是把
style 当成“万能样式覆盖工具”去应付临时需求，却没意识到它让样式彻底脱离了 CSSOM 生态——查不到、调不了、测不了、换不了主题。一旦开始用，就得接受它带来的维护刚性。
