响应式css本身不阻塞渲染，但加载方式影响性能；应通过media属性延迟非关键css、内联首屏关键响应式规则、组合srcset/sizes实现图片响应式懒加载，并避免@import和错误media值。
响应式 CSS 本身不阻塞渲染，但加载方式会影响速度
很多人误以为写一堆 @media 规则就会拖慢页面，其实不然。浏览器解析 CSS 是同步的，但只要 CSS 文件体积不大、HTTP 请求少，影响就有限。真正拖慢首屏的是：未优化的 CSS 文件被阻塞加载（尤其是 <link rel="stylesheet"> 放在 里），以及响应式图片没做懒加载导致大量资源提前下载。
用 media 属性延迟非关键 CSS 加载
对仅用于大屏或打印的样式，可利用 <link> 的 media 属性让浏览器不立即下载和解析：
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 768px)"> <link rel="stylesheet" href="print.css" media="print">
这样浏览器初始只加载默认匹配的样式（如 media="all" 或无 media 属性的），其余按条件触发后才拉取。注意：media 值必须是**有效媒体查询**，写成 media="not all" 或拼错会导致样式完全不生效。
- 不要滥用：核心布局、字体、按钮等基础样式仍应内联或同步加载
- 避免嵌套多层
@import，它会强制串行加载，比<link>更慢 - 可通过
rel="preload"提前获取关键响应式 CSS，但需配合as="style"和onload注入逻辑
图片懒加载必须配合 srcset + sizes
单纯加 loading="lazy" 只控制加载时机，不解决响应式图片在不同设备下仍下载大图的问题。必须组合使用：
这是易秀购主题网分享的一款展示为图片类的类的wordpress主题，WP主题熟悉的朋友应该一眼能看出这是瀑布流修改优化而来。主题并且采用了Ajax加载技术，主题代码非常精简，加载速度非常快。这款图片类主题格式化了几个自定义栏目，分别是price（价格）、from（购买自…）、ob-url（单品url）、shop-url（店铺url）和banner（文章详细页面上部的图片，如果
立即学习“前端免费学习笔记（深入）”；
@@##@@
否则移动端可能先触发懒加载，再从 srcset 中选错尺寸（比如拿了 large.jpg），白瞎了懒加载。
-
sizes必须真实反映该图片在视口中的显示宽度，否则浏览器无法正确选图 - 服务端若支持 Client Hints（如
DPR,Width），可进一步减少客户端计算负担 - 背景图的响应式懒加载更麻烦，得靠 JS 监听
IntersectionObserver+ 动态设background-image
关键 CSS 内联 + 剩余异步加载的实操陷阱
把首屏需要的响应式规则（比如移动端折叠导航、flex 布局断点）内联进 HTML 的 <style></style>，其余 CSS 异步加载，是常见优化。但容易出问题：
- 内联内容不能含
@import，否则会阻塞解析 - 异步加载的 CSS 用
rel="preload"+onload注入时，若页面已存在同名选择器，新样式会覆盖旧样式——但媒体查询顺序错乱会导致断点失效 - Webpack/Vite 等构建工具生成的 CSS chunk 若没配置
media属性，异步加载后所有@media都立即生效，可能干扰首屏渲染流
最稳妥的做法是：只内联 @media (max-width: 767px) 范围内的关键规则，其余完整 CSS 文件用 <link media="print" onload="this.media='all'"> 方式延迟激活。
