HTML中写CSS样式有三种方式：内联style属性、<style>标签嵌入、外链<link rel="stylesheet">；它们的核心差异在于可控性与潜在性能问题，而非美观程度。
HTML 中写 CSS 样式有哪几种方式？
直接在 HTML 里加样式，无非就三种：内联 style 属性、<style> 标签嵌入、外链 <link rel="stylesheet">。它们不是“谁更好看”，而是“谁更可控、谁更容易出问题”。
内联样式（比如 <p style="color: red;">）优先级最高，但无法复用，改一个得全手动改；<style> 标签适合单页小项目或动态生成的临时样式，但会阻塞 HTML 解析；外链 CSS 是标准做法，浏览器能缓存、可并行加载，但多一次 HTTP 请求（HTTP/2 下影响变小）。
为什么手机上样式“闪一下”或“延迟生效”？
这不是 CSS 写错了，而是渲染流水线卡在了样式计算或重排阶段。尤其在低端 Android 设备或 WebView 中，常见原因有：
-
@import在<style>里使用 —— 它是同步阻塞的，比<link>更晚下载、更晚解析 - 大量使用
box-shadow、filter、transform: rotate()等触发层合成的属性，低端机 GPU 跟不上 - CSS 选择器太深（如
div div div p span a），引擎匹配慢，iOS Safari 尤其敏感 - 字体加载未处理：自定义字体没配
font-display: swap，文字先空白再跳变
不同设备上 CSS 解析和渲染速度真有差异吗？
有，而且差距比想象中大。不是“快一点慢一点”，而是某些操作在桌面 Chrome 上毫秒级，在旧款 iPhone 或千元安卓机上可能卡顿 100ms+。关键差异点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 对
will-change和contain支持不一致，开了反而更慢 - Android WebView（尤其系统级）常禁用部分 CSSOM 优化，
getComputedStyle()调用代价高 - 低端设备内存小，CSS 规则超过 1 万行时，解析时间呈非线性增长（Chrome DevTools 的 “Coverage” 面板能验出冗余 CSS）
-
rem单位依赖document.documentElement.style.fontSize动态设置，在页面未完成 DOM 构建前读取会返回默认值，导致样式错乱
怎么快速验证某段样式在真机上是否拖慢渲染？
别只信 Lighthouse 分数。实操建议：
- 用 Chrome 远程调试连安卓机，在
Rendering设置里打开Paint flashing，滑动看哪些区域反复重绘 - 在 iOS Safari 的 Web Inspector 中，启用
Timelines > Layout & Rendering，重点看 “Style Recalc” 和 “Layout” 时间块 - 把可疑样式注释掉，用
performance.mark()+performance.measure()包住element.classList.add()前后，测真实耗时 - 禁用所有动画（
* { animation: none !important; transition: none !important; }），看是否还卡——确认是不是动画触发了频繁重排
最易被忽略的是：CSS 文件本身没压缩、没分包，首屏关键样式混在几 MB 的 app.css 里，设备得先把整张表解析完才开始渲染。拆出 critical.css 内联，其余异步加载，比调任何单个属性都管用。
