适合内联的是首屏必需、体积小、无外部依赖的资源：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 状态）后计算出的最小集合。实操建议：立即学习"前端免费学习笔记（深入）"；用 critters（Vite/webpack 插件）或 penthouse（Node CLI 工具），避免自己写 Puppeteer 脚本------容易漏伪类、媒体查询断点输出前务必 minify，并检查是否混入了未使用的字体声明、@keyframes 动画（它们不会被渲染但会增大体积）如果站点有暗色模式切换，critical CSS 必须同时包含 @media (prefers-color-scheme: dark) 规则，否则首屏闪白/闪黑JS 内联的三个硬约束条件能内联的 JS 必须同时满足：同步执行、无副作用、不依赖 DOM 就绪。哪怕只有一条不满足，就该扔进 <script defer> 或外部文件。 Evoker 一站式AI创作平台
相关推荐
ServBay4 小时前
9 个 Python 第三方库推荐，不用 AI 都好像多出一个团队用户8356290780514 小时前
如何使用 Python 添加和管理 Excel 批注（完整示例）用户8356290780514 小时前
使用 Python 管理 Excel 工作表：创建、复制、删除与重命名SelectDB4 小时前
阶跃星辰基于 SelectDB 构建 PB 级 Agent 可观测平台这个DBA有点耶6 小时前
GROUP BY优化全解：如何写出既不丢数据又飞快的分组查询掉头发的王富贵9 小时前
【StarRocks】极限十分钟入门StarRocksNturmoils9 小时前
WHERE 条件别凭习惯写，常用查询先跑一遍荣码13 小时前
LangGraph多Agent协作：3个Agent干活比1个强，但我踩了4个坑用户8356290780511 天前
Python 操作 PDF 附件：添加、查看与管理指南Databend1 天前
在 AWS 中国峰会逛了一天，我在 Databend 展台看到了 Agent 数据基础设施的新思路