Postmortem页面应采用语义化HTML结构：用<section>划分模块，以<h2>标题明确标识“事件概览”“时间线”“根因分析”“改进措施”四部分，确保5秒内传达关键信息。
Postmortem 页面该用什么结构组织信息
故障复盘页面不是日志堆砌，核心是让读者 5 秒内抓住「发生了什么、为什么发生、怎么修的、怎么避免」。HTML 本身不提供语义化复盘标签，得靠 <section> + 合理 heading 层级撑起骨架：
-
<h2>事件概览</h2>：放时间、影响范围（如「API 响应超时，影响订单创建服务」）、严重等级（P1/P2） -
<h2>时间线</h2>：用<ol>或带时间戳的<dl>，别用纯段落——人工排查时最常翻这里 -
<h2>根因分析</h2>：重点区分「直接原因」（如Redis 连接池耗尽）和「根本原因」（如未配置连接池最大空闲数），后者才是改进点 -
<h2>改进措施</h2>：每条必须可验证，例如「增加 /healthz 接口检查 Redis 连接状态」比「加强监控」有用得多
如何防止 Postmortem 页面变成静态快照
复盘报告不是归档文件，得支持后续追踪。纯 HTML 很难动态更新，但可以埋轻量钩子：
- 在「改进措施」每条后面加
<span class="status">待开发</span>，用 CSS 控制颜色，人工更新时只改 class 值（in-progress/done） - 关键时间节点（如「修复上线时间」）用
<time datetime="2024-06-15T14:22">2024-06-15 14:22</time>，方便脚本提取或未来接入看板 - 避免把截图直接塞进
<img>，换成带data-source属性的占位符，例如<img src="/placeholder.png" data-source="grafana/redis-pool-metrics-20240615">，后期可批量替换真实链接
哪些 CSS 细节能快速提升可读性
工程师扫读复盘页平均停留不到 90 秒，样式不是为了好看，是减少认知负担：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 时间线用
border-left: 3px solid #e2e8f0+padding-left: 1.5rem，视觉上自然分组 - 根因分析里，把技术关键词（如
OOMKilled、etcd leader election timeout）用<code></code>包裹并设为background: #fff8e6，一眼识别术语 - 影响范围描述里，服务名、模块名统一用
<strong></strong>加粗，比如「payment-gateway 的 /v2/pay 接口」 - 禁用所有 hover 动画和过渡效果——复盘时没人想等 300ms 的淡入
为什么不要用 JavaScript 渲染核心内容
Postmortem 页面可能被离线保存、邮件转发、甚至打印出来。JS 渲染的内容在这些场景下直接消失：
立即学习“前端免费学习笔记（深入）”；
- 搜索「
503 Service Unavailable」时，如果错误码是 JS 插入的，Ctrl+F找不到 - 运维半夜收到告警邮件，点击链接打开页面，但 CDN 缓存了旧版 JS，导致「改进措施」列表为空
- 审计要求留存原始报告，而 JS 渲染的页面无法通过
curl -s URL | grep "root cause"验证内容完整性 - 真要用交互（比如折叠长日志），用
<details><summary></summary></details>，原生支持、零依赖、SEO 友好
最麻烦的从来不是写完页面，而是三个月后有人问「当时那个 Redis 连接池问题，maxIdle 最终调成多少了？」——所以每个数字、每个配置项、每个命令行参数，都得作为纯文本落在 HTML 里，别藏在 tooltip 里，也别指望靠「详见附件」搪塞。
