默认阻塞渲染，因浏览器需构建cssom才能合成渲染树、避免fouc；可通过media属性（如media="print"）延迟非关键css加载，并在domcontentloaded时激活，实现非阻塞引入。
引入 CSS 文件本身不会直接触发重绘，但加载和解析过程会阻塞渲染，导致浏览器在样式就绪前延迟绘制，或在样式注入后因布局/尺寸/颜色等变化而触发重绘（甚至重排）。关键不是“引入”这个动作，而是 CSS 的加载时机、作用范围与是否影响已渲染内容。
为什么 link rel="stylesheet" 会阻塞页面渲染
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会暂停构建 DOM 树，等待该 CSS 文件下载并解析完成（即 CSSOM 构建完毕），再继续解析后续 HTML。这是为了防止「先渲染无样式内容（FOUC）」——否则用户可能看到闪白、文字跳动或布局错乱。
- 阻塞发生在
中的外部 CSS，且不带media属性（如media="print"不阻塞屏幕渲染） - 多个
<link>按顺序加载，后加载的 CSS 可能覆盖前面的规则，间接改变元素样式，从而触发重绘 - 即使 CSS 文件已缓存，解析 CSSOM 仍需时间，尤其当文件体积大、含大量嵌套选择器或复杂计算（如
calc()、自定义属性依赖链）时
@import 比 link 更容易引发重绘问题
@import 在 CSS 文件内部使用，它不仅延迟加载（必须等父 CSS 下载解析后才发起子请求），还破坏并行加载能力，常导致串行请求链。更严重的是：@import 声明后的规则，在导入的样式未就绪前不会生效，一旦导入完成，可能批量更新样式，造成局部或全局重绘。
-
@import url("base.css")必须写在 CSS 文件最开头，否则被忽略；位置错误会导致整个样式表失效 - 无法通过 JavaScript 动态修改
@import加载的样式（document.styleSheets中不暴露其规则） - 现代构建工具（如 PostCSS）虽支持
@import语法，但实际是编译期合并，不产生运行时@import，这点务必分清
内联样式和 style 标签为何很少触发重绘
内联样式（style="..."）和内部样式表（<style></style>）随 HTML 一并解析，不触发额外网络请求，因此没有加载延迟。它们参与首次渲染流程，浏览器在构建 CSSOM 时已知全部规则，无需中途插入或替换样式。
- 内联样式优先级最高（权重 1000），但只作用于单个元素，变更时仅影响该元素，重绘范围最小
-
<style></style>中的规则按书写顺序应用，若用 JavaScript 动态修改其textContent，会触发对应范围的重绘（非重排，除非改了 layout 相关属性） - 注意：用 JS 批量操作
style属性（如循环设el.style.color、el.style.margin）比一次性改className更易触发多次重绘
优化加载顺序时最容易被忽略的细节
很多人以为把 CSS 放 就万事大吉，但真正影响重绘频率的，是「哪些样式必须首屏就绪」和「哪些可以延后」。
- 关键 CSS（Critical CSS）应内联在
中，比如首屏文字、按钮、导航栏的样式；非关键部分（如折叠面板、模态框、页脚组件）可延迟加载 - 用
media属性做条件加载：<link rel="stylesheet" href="print.css" media="print">完全不参与屏幕渲染流程 - 避免在
底部放<link>—— 浏览器仍会阻塞渲染，且可能导致已渲染内容突然重绘（例如背景色从透明变实色） - CSS 文件中慎用
transition或animation作用于初始状态（如opacity: 0 → 1），哪怕只是加载后自动触发，也会带来意料外的视觉抖动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
