纯HTML无法动态展示CI/CD流水线状态，因它不能实时拉取GitHub Actions、Jenkins或GitLab CI的API数据；真实页面必须依赖JavaScript调用接口（如/api/pipeline/latest）获取JSON并更新DOM，配合SVG绘制可扩展流程图，且需合理配置HTTP缓存策略防止状态陈旧。
为什么直接用 HTML 写 CI/CD 流水线页面不现实
纯 HTML 无法动态展示流水线状态——它没有能力实时拉取 GitHub Actions、Jenkins API 或 GitLab CI 的构建日志、阶段状态、触发时间。你看到的“静态流水线图”，本质上只是个示意图，和真实运行中的 CI/CD 毫无数据关联。
常见错误现象：点击“重试”按钮没反应、构建状态始终显示“running”但实际已失败、时间戳是写死的 2023-01-01。这些都不是样式或结构问题，而是缺少后端数据源和前端状态管理。
- 真实 CI/CD 页面必须依赖某类 API 接口（如
/api/pipeline/latest）返回 JSON 数据 - 前端至少需用 JavaScript（哪怕只是
fetch()+innerHTML更新）驱动 DOM - 若强行只用 HTML + CSS 实现“交互感”，最终会变成一堆不可维护的
onclick="alert('模拟点击')"
用纯 HTML + JS 快速搭一个可对接 API 的骨架页
不引入框架，也能让页面具备基础响应能力。关键是把数据获取和视图更新拆开，避免硬编码状态。
使用场景：临时看板、内部小团队轻量级部署页、CI 工具尚未开放权限时的 mock 验证界面。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- HTML 中为每个阶段预留带
data-stage属性的容器，例如：<div data-stage="build" class="stage"></div> - JS 里统一用
document.querySelectorAll('[data-stage]')批量更新，避免逐个getElementById - 状态映射建议用对象而非 if-else：
const statusMap = { 'success': '✅', 'failed': '❌', 'pending': '⏳' } - 别在 HTML 里写死颜色 —— 用 CSS 类控制，例如添加
stage--failed后由样式表决定红底白字
fetch('/api/pipeline/latest')
.then(r => r.json())
.then(data => {
document.querySelectorAll('[data-stage]').forEach(el => {
const stage = el.dataset.stage;
const status = data.stages?.[stage]?.status || 'unknown';
el.textContent = statusMap[status] || '❓';
el.className = `stage stage--${status}`;
});
});
流水线节点连线用 SVG 还是 CSS？选错就难改
横向流程图（如 checkout → build → test → deploy）用 CSS 实现简单，但一旦要支持“并行分支”“失败跳转”“动态增删节点”，CSS 的 ::after 伪元素和绝对定位立刻失控。
性能与兼容性影响：SVG 路径渲染稳定，缩放不失真，且能绑定事件（比如点击某个节点展开日志）；而用 CSS border + transform 拼接的箭头，在高 DPI 屏或 zoom=125% 下常出现 1px 锯齿或偏移。
- 如果只有 4–5 个线性阶段，用 Flex 布局 +
border-right足够，代码少、加载快 - 但只要涉及“test 和 lint 并行执行”，就必须用 SVG
<path>或<line>显式定义坐标 - 别用
position: absolute手动调每个连接线位置——后期加节点等于重算所有 left/top - 推荐用
getBoundingClientRect()动态计算节点坐标再画线，比写死数值健壮得多
部署后刷新页面丢失状态？别漏掉缓存策略
很多团队把页面直接扔进 Nginx 静态目录，结果发现：构建刚成功，F5 刷新后又变回旧状态。不是代码 bug，是浏览器缓存了 HTML 或 JS 文件。
关键点不在 HTML 本身，而在服务端返回的 HTTP 头：
- 确保
index.html响应头含Cache-Control: no-cache（不是max-age=3600） - JS 文件名带哈希（如
main.a1b2c3.js），HTML 中引用它，这样更新后浏览器自然请求新文件 - 如果用
fetch调 API，记得加cache: 'no-store'，否则 Chrome 可能在 devtools 关闭时仍返回缓存响应 - 本地测试时容易忽略这点——
file://协议下很多缓存策略不生效，上线后才暴露
最隐蔽的问题：Nginx 默认对 .html 启用 1h 缓存，而你根本没意识到它在替你“优化”。
