布局抖动源于关键样式未及时参与首次渲染或后置样式修改盒模型，须从html结构和顺序双管齐下；内联首屏关键css、preload+onload加载非关键css、html{overflow-y:scroll}防滚动条抖动是三大核心解法。
布局抖动不是样式没写对，而是浏览器在解析和渲染过程中，关键样式没来得及参与首次绘制，或后续样式加载时意外修改了盒模型——解决它必须从 HTML 结构和 <link> 顺序两个层面同时控制。
为什么顺序错乱会导致布局重排
浏览器按 <link rel="stylesheet"> 在 HTML 中的书写顺序依次解析 CSS，后加载的同权重规则会覆盖前面的。但问题不在“覆盖”，而在“时机”：如果 layout.css 里定义了 .header { height: 60px; }，而 theme.css（放在它后面）又写了 .header { padding: 20px; }，那这个 padding 就可能在首屏渲染完成后才生效，触发一次重排。
- 常见错误现象：页面刚打开时内容居中，100ms 后突然左移；轮播图容器高度先塌缩再撑开
- 真正危险的是修改
width、height、padding、margin、position、display的样式被后置加载 - 构建工具（如 Webpack/Vite）可能打乱
<link>顺序，尤其用了splitChunks或manualChunks时，要检查最终 HTML 输出 - 用 DevTools → Elements → 查看
中<link>的实际顺序，别只信源码
内联关键 CSS 是唯一不依赖网络的兜底方案
哪怕 CDN 延迟 200ms，只要首屏必需的样式还没就绪，布局抖动就可能发生。内联是绕过 HTTP 请求的硬手段，但必须严格限定范围和写法。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 只内联首屏（above-the-fold）必需的样式：比如
.container宽高、.hero字体/颜色、基础box-sizing和reset规则 - 必须用
<style></style>标签，不能用<link rel="stylesheet">即使 href 指向内联数据 URL - 体积建议 ≤ 10KB（gzip 前），否则会阻塞 HTML 解析本身，得不偿失
- 别手写——用
critters（Vite）、critical（CLI）或 Next.js 内置能力自动生成，否则上线后很快失效
preload + onload 切换是加载非关键 CSS 的安全姿势
<link rel="preload"> 本身不应用样式，只是提前发请求；漏掉任一要素，它就跟普通 <link> 没区别，照样造成抖动。
- 必须带
as="style"：否则浏览器当普通资源处理，不提升优先级 - 必须配
onload="this.rel='stylesheet'"：否则下载完也不会注入 DOM - 必须加
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>：JS 禁用时兜底 - 错误写法：
<link rel="preload" href="main.css">—— 缺as，等于白写 - 注意：preload 不解决内联缺失问题，它只是辅助；CDN 延迟高或文件大时，仍可能 FOUC
滚动条宽度突变是移动端最隐蔽的抖动源
iOS 和 Android 上，滚动条出现/消失导致 body 可用宽度跳变（通常 12–17px），所有 width: 100%、flex 居中、text-align: center 元素都会瞬间重排——这和 CSS 加载无关，但视觉上完全一样。
- 验证方式：打开 DevTools → 切到手机模拟器 → 强制刷新，观察是否在加载完成前就抖
- 最简解法：
html { overflow-y: scroll; }，只设 html，别连 body 一起设（防双滚动条） - 副作用是常驻滚动条；若设计不允许，必须改用局部滚动容器（如
<div style="overflow-y:auto;max-height:500px">），并确保内部无 <code>position: fixed - 微信小程序、Vue el-scrollbar 等局部滚动上下文中，
position: fixed必抖，必须移出滚动容器挂到document.body
真正难处理的抖动，往往藏在第三方库的 mounted 钩子里——它们悄悄读 offsetHeight、写 style.height，又没做批量或节流。这类问题不会出现在你写的 <link> 顺序里，但会直接触发 layout thrashing。
