值得内联的资源需满足压缩后≤2kb且仅服务当前页面；超2kb或公共样式内联会增大html体积、破坏缓存；ssr需样式一致以防hydration mismatch；必须压缩后再内联，并注意执行时机与作用域。
内联关键资源确实能砍掉请求，但不是所有 CSS/JS 都适合塞进 HTML 里——<style></style> 和 <script></script> 标签里塞错内容，反而拖慢首屏、破坏缓存、甚至触发 hydration mismatch。
哪些资源才值得内联？
判断标准就一条：压缩后 ≤ 2KB 且只服务于当前页面。比如登录页的表单校验样式、Landing 页的轮播动画逻辑。
- 超过 2KB 的 CSS/JS 内联后，HTML 体积膨胀明显，首次字节传输延迟上升
- 被多个页面复用的公共样式（如
reset.css或theme.css）内联等于放弃缓存，下次访问还得重新下载 - SSR 渲染时，内联的
<style></style>必须和组件实际生成的样式完全一致，否则 React/Vue 会报Prop `className` did not match类警告
内联前必须压缩，不能直接贴源码
未压缩的 CSS/JS 内联等于白干：一段 15KB 的未压缩 JS 塞进 HTML 后，可能比原来多发 2–3 倍的字节；gzip 虽能压，但浏览器仍得先解析整块文本才能执行。
- CSS 用
csso或clean-css压缩，删空格、注释、冗余规则 - JS 用
terser压缩，启用mangle和compress，避免保留console.log等调试语句 - 检查压缩后体积：
cat main.css | csso --output /dev/stdout | wc -c，确认<style></style>里最终内容 ≤ 2048 字节
内联位置和加载时机很关键
<style></style> 放 开头没问题，但 <script></script> 不能随便放——尤其带 DOM 操作的脚本。
- 内联 JS 若操作
document.body，必须放在前，或加defer属性（注意：defer对内联脚本无效，只对带src的有效） - 推荐写法：
<script>(() => { /* 初始化逻辑 */ })();</script>，立即执行且不污染全局作用域 - 避免在
里内联 JS 并调用document.getElementById()—— 此时 DOM 还没解析完，必然返回null
真正容易被忽略的点是：内联不是“省事”，而是“精确控制”。它把缓存权交给了 HTML 文件本身，一旦 HTML 变了，哪怕只改一个空格，整个内联资源都得重下。所以别为了少一个请求就把 lodash.js 塞进去——那不是优化，是埋雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
