内联仅适用于首屏必需、体积小、无依赖的CSS/JS资源；critical CSS需精准提取并压缩，JS内联须同步执行、无副作用、不依赖DOM；位置与CSP配置不当会引发渲染阻塞或安全策略报错。
内联不是“把CSS/JS塞进HTML里”就完事——它只对首屏必需、体积小、无依赖的资源有效，其余硬塞只会拖慢渲染、触发CSP报错、破坏缓存。
critical CSS 必须精准提取，不能靠手写或简单截取
手写 critical CSS 容易漏掉伪类（如 :hover）、媒体查询（如 @media (prefers-color-scheme: dark)），也容易混入未使用的 @keyframes 或字体声明。线上工具若没模拟真实视口（比如用 1200px 宽度提取手机端首屏），结果基本不可用。
- 用
critters（Vite/Webpack 插件）或penthouse（Node CLI）驱动 Puppeteer，设置viewport: { width: 375, height: 667 }模拟 iPhone SE - 提取后必须
minify，并检查输出中是否含@font-face、display: none元素的样式规则 - 暗色模式站点需显式保留
@media (prefers-color-scheme: dark)下的关键规则，否则首屏闪白/闪黑
JS 内联有三个硬性条件，缺一不可
能内联的 JS 必须同步执行、无副作用、不依赖 DOM 就绪。React/Vue 启动代码、含 fetch 或 async/await 的函数、任何调用第三方 SDK 的逻辑，全部排除在外。
- 仅限极小初始化逻辑：如设置
data-theme、注入__INIT_DATA__、触发骨架屏显示 - 含
import/require的模块绝对不可内联——解析会失败 - 哪怕只有一行
document.querySelector，也得等DOMContentLoaded，应改用defer
内联位置和 CSP 是两个高频翻车点
critical CSS 放在 <head> 里但排在 <link rel="stylesheet"> 后面？浏览器照样阻塞渲染。用了 CSP 却没配 nonce 或 hash？Refused to execute inline script because it violates the following Content Security Policy 直接报错。
立即学习“前端免费学习笔记（深入）”；
- critical
<style>必须置于<head>最顶部，且前面不能有任何<link rel="stylesheet"> - CSP 生产环境禁用
'unsafe-inline'；应生成nonce并同步注入到 HTML 和响应头中 - HTTP/2 环境下内联收益明显下降——多路复用已缓解请求开销，此时更应关注资源拆分与缓存策略
真正难的不是“怎么内联”，而是判断“哪些该内联”。每次构建都得重新提取 critical CSS，每次加新组件都得验证是否漏了它的样式，暗色模式、响应式断点、用户交互态——这些细节一旦漏掉，内联反而让首屏更不稳定。
