通过 preload 提前加载关键CSS并动态切换 rel 属性，确保样式优先下载；2. 按重置、布局、组件、主题顺序排列 link 标签，保障结构稳定；3. 内联首屏关键CSS，异步加载非关键样式，减少FOUC与重排；4. 避免使用 @import，改用独立 link 标签提升并行加载效率。
页面中CSS加载顺序直接影响DOM渲染和布局稳定性。如果样式资源加载时机不一致，容易导致布局抖动（Layout Shift）——内容突然跳动或重排，影响用户体验。要避免这个问题，关键在于控制 <link> 的加载优先级和执行顺序。
使用 preload 提前声明关键CSS
通过rel="preload" 告诉浏览器提前下载关键样式文件，避免阻塞渲染：
<link rel="preload" href="critical.css" as="style">- 预加载不会立即应用样式，需配合 onload 切换 rel 来启用
- 示例：
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
按优先级顺序排列 link 标签
将影响布局的核心样式放在前面，装饰性或主题类样式后置：- 基础重置（reset/normalize）→ 布局结构 → 组件样式 → 主题/动画
- 确保首屏所需样式优先加载，减少FOUC（Flash of Unstyled Content）
- 避免后加载的CSS修改盒模型、定位或尺寸造成重排
内联关键CSS，异步加载非关键样式
将首屏必须的CSS直接嵌入HTML头部，提升渲染效率：- 在
中使用<style></style>内联关键规则 - 其余样式用
media="print"或动态脚本异步加载，例如：<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
避免 @import 引入关键样式
@import 会延迟加载，破坏并行下载优势：
- 每个 @import 都是串行请求，增加关键路径长度
- 应全部替换为独立的
<link>标签以实现并行加载
<link> 的顺序与加载方式，能显著减少因CSS延迟导致的布局抖动，让页面更稳定流畅。 
