TL;DR
子页面 <style is:inline> 放在 <body> 底部，导致 CSS 加载晚于 HTML 渲染，出现 200ms 无样式闪屏。修复方案：关键 CSS 用内联 style=「」 属性。
摘要
- 影响：所有子页面首次加载时闪现无样式内容
- 根因：Astro 的
<style is:inline>注入到<body>底部 - 修复：关键布局样式改为内联，非关键样式保留
<style is:inline>
时间线
| 时间 | 事件 |
|---|---|
| 08 | 用户报告：文章页加载时”闪了一下” |
| 08 | npm run dev 无法复现 |
| 08 | npm run preview 确认 FOUC 存在 |
| 08 | 开发者工具检查：CSS 在 HTML 之后 200ms 才加载完成 |
| 08 | 定位根因：<style is:inline> 在 <body> 底部 |
| 09 | 最终方案：关键 CSS 内联到元素 style=「」 属性 |
根因分析
FOUC = 浏览器先渲染无样式 HTML，样式加载完成后页面”跳”到正确样式。
<style is:inline> 是原样输出到 HTML，位置就是你在 Astro 文件里写位置。编译后 <style> 出现在 <body> 底部，浏览器先渲染无样式内容，再应用样式。
修复方案
关键 CSS 用内联 style=「」 写在 HTML 元素上：
<!-- 改成 -->
<div class="post-layout" style="display:flex; gap:24px;">非关键样式（hover 效果、动画）继续用 <style is:inline>。
教训
- Dev 和 Prod 的渲染差异可以掩盖问题，必须用 preview 模式测试
<head>里的样式阻塞渲染（好），<body>底部的样式触发 FOUC（坏）- 内联关键 CSS 是最可靠方案
延伸阅读
COMMENTS
种下你的想法
在花园里留下一条评论，和这篇文章一起生长。