内联样式非性能瓶颈而是工程隐患，破坏复用、阻碍缓存、增大HTML体积、降低可维护性；其使CSS无法被缓存因样式绑定HTML且HTML缓存策略弱于独立CSS文件。
内联样式本身不会显著拖慢页面渲染，但会破坏样式复用、阻碍缓存、增加 HTML 体积，并让维护变得脆弱——它不是性能瓶颈，而是工程隐患的放大器。
内联样式为什么会让 CSS 文件无法被浏览器缓存
当把 不是所有内联都该被消灭。关键看是否「动态、唯一、不可预知」： 靠肉眼检查不现实。可用 DevTools 快速定位，再用工具自动化治理： 立即学习“前端免费学习笔记（深入）”； 真正难处理的从来不是“能不能用内联”，而是团队协作中没人明确谁负责样式收敛、上线后没人敢动那些写了十年的 style 属性写在 HTML 标签里（比如 .css 文件。
Cache-Control: public, max-age=31536000
标签写在 里也属于“内联 CSS”，同样绕过外部 CSS 缓存机制style 的 HTML，还会削弱 HTTP/2 多路复用和 Brotli 压缩效率哪些场景下内联样式其实合理且必要
transform: translateX(42px)），用 class 难以穷举），配合 critical CSS 提前加载style 标签，本质是服务端生成的内联，但有哈希去重和提取逻辑，不算原始意义上的“乱写”如何检测并批量清理无意义的内联样式
[style] 可高亮所有含内联样式的元素console.table(
[...document.querySelectorAll('[style]')].map(el => ({
tag: el.tagName,
styleLength: el.style.cssText.length,
isStatic: /px|rem|%|em/.test(el.style.cssText) && !el.style.cssText.includes('calc') && !el.style.cssText.includes('var')
}))
);html-validate，配置规则 "attr-no-static-value": ["error", { "attributes": ["style"] }] 拦截硬编码样式style="float:left;margin-right:5px" —— 这类代码往往比性能问题更早压垮维护节奏。
