media="print" 是按需加载而非延迟加载，仅在打印时请求css；大小写敏感且不可与screen混用；不能用于首屏优化，正确做法是先屏蔽再动态启用。
media="print" 本身不延迟，但能控制加载时机
浏览器只在触发打印流程（window.print() 或打开打印预览）时才请求、解析并应用 media="print" 的 CSS 文件。它不是“延迟加载”，而是“按需加载”——普通浏览阶段完全不参与渲染，也不会阻塞 HTML 解析或首屏渲染。
这意味着：你写 <link rel="stylesheet" href="print.css" media="print">，页面加载时 Network 面板里根本看不到 print.css 的请求；只有点 Ctrl+P 或调用 window.print() 后，它才会出现。
常见误操作：
-
media="Print"或media="PRINT"：大小写敏感，必须全小写print -
media=print（缺英文双引号）：HTML 属性值未包裹，解析失败，等同于没写 -
media="screen, print"：逗号分隔被识别为两个媒体类型，导致立即加载，失去按需意义
为什么不能用 media="print" 做首屏延迟加载？
因为它的触发条件是打印上下文，不是 DOM 就绪或用户滚动。你想优化首屏性能，media="print" 完全不响应 DOMContentLoaded、scroll 或 idleCallback 这些事件——它只听命于打印机。
如果你的目标是「让非关键 CSS 不阻塞首屏」，正确做法是：
- 用
media="(min-width: 9999px)"或media="print"（借其不匹配特性）初始屏蔽 - 在
DOMContentLoaded后立刻改link.media = "all" - 确保该
link没被重复插入（检查document.head.querySelectorAll('link[href="xxx.css"]')）
注意：media="print" 在这个场景里只是个“占位符技巧”，不是语义用途——别把它和真正的打印样式混用。
打印样式表加载失败的典型信号
打开打印预览后样式没生效，先看三个地方：
- DevTools → Network → 筛选
css，确认print.css是否发起请求（没请求＝media写错或路径 404） - 打印预览中右键 → “检查”，切换到 Elements 面板，看
里对应<link>的media值是否仍是"print"（若被 JS 改成"all"，就失效了） - Styles 面板顶部媒体选择器是否选中了
print（默认是screen，不切换就看不到@media print规则）
Chrome 打印设置里的「背景图形」开关也会强制覆盖 background 相关声明，哪怕 CSS 写了 background: transparent !important，也得手动关掉它。
多个 print 样式表的加载顺序与冲突
浏览器对 media="print" 的 <link> 没有特殊排序逻辑，它们按 HTML 中出现顺序加载和层叠——和 screen 一样。
但要注意：
- 如果同时有
<link media="print" href="base.css">和<link media="print" href="theme.css">，后者规则会覆盖前者同名选择器 - 不要拆成多个小 print 文件来“按需加载”，因为每次打印都会全部拉取；合并进一个
print.css更可靠 -
@import在 print 样式里仍会阻塞解析，禁止在@media print块内使用
真正容易被忽略的是：iframe 内容不继承父页的 @media print，如果页面含嵌入式报告或图表，得单独给 iframe 的文档注入 print 样式，或提前把内容提取出来重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
