适合内联的是首屏必需、体积小、无外部依赖的资源critical.css≤10KB和纯同步的theme.js绝对不可内联fetch、React/Vue启动代码等有依赖或体积大的JS以及受CSP限制的内联脚本和样式。哪些资源适合内联哪些绝对不能动内联 script 和 style 只对「首屏必需、体积小、无外部依赖」的资源有效。CSS 中的首屏关键样式如 header、hero 区块可以内联JS 中仅限极小的初始化逻辑比如设置 data-theme、触发骨架屏fetch、React、Vue 启动代码都别碰——它们体积大、有执行时序依赖硬塞进 HTML 会导致解析阻塞加剧反而更慢。常见错误现象Refused to execute inline script because it violates the following Content Security Policy。一旦用了 CSP尤其生产环境内联 JS/CSS 默认被禁必须显式加 unsafe-inline不推荐或用 nonce/hash 白名单——这点很多人上线后才踩坑。? 推荐内联首屏用到的 critical.css压缩后 ≤ 10KB、theme.js纯同步逻辑? 绝对禁止含 import / require 的模块、带 async 或 await 的函数、任何调用第三方 SDK 的代码?? 兼容性注意HTTP/2 下内联收益下降明显因为多路复用已缓解请求开销但 HTTP/1.1 环境仍值得做怎么安全生成和注入关键 CSS手写 critical CSS 不现实得靠工具提取。主流方案是 Puppeteer 驱动真实浏览器渲染首屏抓取实际用到的样式规则——不是简单截取 head 里的 style而是模拟 viewport 尺寸 用户交互如 hover 状态后计算出的最小集合。实操建议立即学习“前端免费学习笔记深入”用 crittersVite/webpack 插件或 penthouseNode CLI 工具避免自己写 Puppeteer 脚本——容易漏伪类、媒体查询断点输出前务必 minify并检查是否混入了未使用的字体声明、keyframes 动画它们不会被渲染但会增大体积如果站点有暗色模式切换critical CSS 必须同时包含 media (prefers-color-scheme: dark) 规则否则首屏闪白/闪黑JS 内联的三个硬约束条件能内联的 JS 必须同时满足同步执行、无副作用、不依赖 DOM 就绪。哪怕只有一条不满足就该扔进 script defer 或外部文件。 Evoker 一站式AI创作平台