页面卡顿因浏览器并发限制（通常6个）和后台降频，应改用setTimeout链式调用、加时间戳防补发、缓存localStorage数据；状态码需按2xx/4xx/5xx等分组设图标颜色；单页HTML可纯静态离线运行，避免import、用IIFE；响应时间用performance.now()在json解析后计算更准。
用 fetch 轮询 API 获取服务状态时，为什么页面卡顿或请求被节流？
浏览器对同一域名的并发 fetch 有默认限制（通常 6 个），频繁轮询（如每 2 秒一次）容易堆积未完成请求，尤其在页面后台运行时，Chrome 会主动降频甚至暂停定时器。这不是代码写错了，是浏览器策略。
- 改用
setTimeout链式调用替代setInterval，确保前一次请求结束才发起下一次：避免请求积压 - 在
fetch前加时间戳判断是否“该查了”，跳过因页面休眠导致的集中补发 - 服务端 API 必须支持 CORS，且响应头含
Access-Control-Allow-Origin: *，否则控制台报No 'Access-Control-Allow-Origin' header - 首次加载失败时别直接白屏，用
localStorage缓存最近一次成功数据，显示“最后更新：2 分钟前”
状态图标和颜色怎么根据 HTTP 状态码自动切换？
不能只看 response.ok（它只判 200–299），真实 Uptime 监控需区分 5xx（服务挂了）、4xx（配置错）、3xx（重定向异常）、2xx（正常）——尤其是 204/301 这类非 200 但合法的响应。
- 取
response.status而非response.ok；response.statusText可作辅助提示（如 “Service Unavailable”） - 用
switch明确分组：200–299→ 绿色 ✔；500–599→ 红色 ✖；400–499→ 黄色 ⚠；其他（如网络断开）→ 灰色 — - 图标建议用 Unicode 字符（
✔、✖）或内联 SVG，避免额外请求；CSS 用color控制，别用图片
如何让单页 HTML 文件离线可用、不依赖服务器？
很多教程教你配 Node.js 后端或 Nginx，但入门监控页面完全可以纯静态——只要 API 是公开可跨域访问的（比如你用 UptimeRobot、Healthchecks.io 或自建的轻量端点）。
- 把所有逻辑写进一个
<script>标签里，不用构建工具、不打包；双击index.html就能打开 - 避免使用
import（ESM 模块在 file:// 协议下被禁用），用 IIFE 包裹逻辑防止变量污染 - 若需存储多个服务配置，直接写死在 JS 里：
const services = [{ name: "API", url: "https://api.example.com/health" }]，别试图读取外部 JSON - 注意：Safari 对
file://的fetch更严格，开发阶段建议用npx http-server起个本地服务
响应时间（Response Time）显示不准，总比 curl 慢 200ms？
浏览器 fetch 测的是从发起请求到收到完整响应的时间，包含 DNS 查询、TCP 握手、TLS 协商、TTFB、内容下载——而命令行 curl -w "@format.txt" 默认只计 TTFB 或不含 DNS。两者本就不等价。
立即学习“前端免费学习笔记（深入）”；
- 用
performance.now()手动打点比fetch自带 timing 更准：const start = performance.now(); fetch(...).then(() => console.log(performance.now() - start)) - 别在
then里算耗时——要放在response.clone().json()完成后，否则没计入 JSON 解析时间 - 如果服务启用了 Gzip/Brotli，解压时间也会计入；想排除这个干扰，可在服务端关闭压缩，或用
response.headers.get("content-encoding")标注
实际部署时最容易忽略的是服务端健康检查接口本身是否稳定——它要是挂了，整个监控页就变成“用故障检测故障”的死循环。建议这个接口单独托管，或至少和被监控服务物理隔离。
