Axis笔记

外观

3.3 回归检查

约 597 字

前端回归

本页对应「三、操作步骤」的 3.3，按页面清单逐项检查渲染、交互与性能，确认改版没有引入报错、布局错位或指标恶化。返回上级：前端交互改版。

前置条件

  • 3.1 与 3.2 已完成，构建产物可本地预览。
  • 回归清单已写明覆盖页面：首页、列表页、详情页、搜索页、404 页。
  • 已保存改版前的性能基线，用于对比 LCP 与 TBT。

操作步骤

  1. 启动本地预览，逐页检查状态码与标题，先排除致命错误：
for p in "/" "/notes/" "/notes/link-check/" "/search/" "/404.html"; do
  printf '%s\t' "$p"
  curl -sS -o /dev/null -w "%{http_code}\n" "http://127.0.0.1:8080$p"
done
  1. 检查页面是否残留未使用的旧样式与旧脚本引用：
grep -rn "OldCard\|old-card" /srv/axis/dist-preview --include=*.html --include=*.css | wc -l
grep -c "script" /srv/axis/dist-preview/index.html
  1. 对首页与详情页采集性能数据，与基线对比：
npx lighthouse "http://127.0.0.1:8080/" --only-categories=performance \
  --output=json --output-path=/srv/axis/metrics/frontend-after.json \
  --chrome-flags="--headless --no-sandbox" --quiet
jq '.audits["largest-contentful-paint"].numericValue' /srv/axis/metrics/frontend-after.json
  1. 按清单手工检查交互：导航展开、搜索输入、返回顶部、外链跳转，各执行一次并记录结果。

结果确认

  • 五个页面均返回 200，404 页返回 404 且渲染正常。
  • 产物中不再包含旧组件的类名与引用，脚本数量与改版前一致。
  • LCP 与 TBT 相对基线未明显恶化，若变差需给出原因。
  • 交互项全部可用，无点击后无响应、无控制台报错。

注意事项

  • 回归要覆盖改版未直接改动的页面，公共组件的问题往往在别的页面暴露。
  • 性能对比必须同环境、同设备，本地预览与线上不可混比。
  • 把检查结果记入回归清单，未通过项修复后重新执行整份清单，而不是只复测该项。
  • 浏览器控制台的报错要逐条记录，即使页面显示正常，报错也可能意味着某个交互已失效。
  • 回归用的构建产物要与待发布版本一致，本地热更新模式下的结果不能作为通过依据。
  • 通过后保留一份回归记录，写明版本、时间、执行人与未关闭的风险项。