不该加载CSS的页面应在HTML输出时直接省略标签，构建时用Webpack/Vite按入口注入，服务端则通过模板条件判断（如Express+EJS中用page变量），禁止JS检测location——因预加载已发生。
哪些页面不该加载某个 CSS 文件
直接删掉 <link> 标签最干净，但前提是构建时就能确定——比如用 Webpack 或 Vite 的 HTML 插件按页面入口动态注入；如果是传统多页应用（如 PHP/Java 渲染的页面），就得靠服务端逻辑判断是否输出该 <link> 标签。
服务端模板里做条件判断
常见模板引擎都支持 if 判断，关键点是把“当前页面是否需要该样式”这个信息传进去。比如在 Express + EJS 中：
<% if (page !== 'login' && page !== 'error') { %>
<link rel="stylesheet" href="/assets/main.css">
<% } %>
注意：page 变量需由路由层明确设置，不能靠 JS 检测 window.location.pathname —— 那时 HTML 已发出，<link> 早就错过了。
- PHP 中可用
$_SERVER['REQUEST_URI']或路由参数判断 - Django 模板用
{% if request.resolver_match.url_name != 'login' %} - 避免写成
if (location.href.includes('xxx'))—— 这类 JS 判断无法阻止资源被浏览器预加载器提前抓取
前端 JS 动态移除或跳过加载
不推荐，但某些场景下（如 CMS 后台统一模板、无法改服务端）只能妥协处理。核心是：在 中先不写 <link>，由 JS 控制是否创建。
立即学习“前端免费学习笔记（深入）”；
const shouldLoadCSS = !['/login', '/404'].includes(window.location.pathname);
if (shouldLoadCSS) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/assets/main.css';
document.head.appendChild(link);
}
风险点很实在：
- 首屏样式可能闪动（CSS 加载延迟）
- 如果 JS 执行前已有内联样式依赖该文件里的类名，渲染会错乱
- 部分浏览器对动态插入的
<link>不触发 preload scanner，加载优先级更低
用 media 属性做简单条件屏蔽
适用于「仅在特定视口或状态才需要」的场景，比如打印样式或暗色模式专属样式。它不会阻止下载，但能阻止应用：
<link rel="stylesheet" href="/print.css" media="print"> <link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
注意：media 不是开关，只是媒介查询匹配失败时不将规则注入渲染树。文件仍会被浏览器下载（除非 HTTP/2 服务器推送被禁用且资源未缓存）。
真正想完全跳过加载，必须从 HTML 输出源头控制 <link> 是否存在——这点容易被忽略，尤其在 SPA 套多页壳的混合架构里，常误以为路由切换后删 DOM 就算卸载了样式。
