perf(core): Wave 0 性能根因 — 连接复用/视频轮询脏检查/图懒加载/隐藏tab停轮询
- settings/base.py: MySQL 加 CONN_MAX_AGE=300 + 健康检查 + connect_timeout=5 (development/production 共用,production 经 from .base import * 继承);development 去重 - App.tsx pollVideosQuiet: 收尾 setProjectDetail 改 JSON 脏检查,在途段未变化时 跳过 setState,整棵管线不再每 5 秒空重渲染(纯前端,不碰生成业务) - ai-tools.tsx: 任务历史网格+列表两处 img 补 loading=lazy/decoding=async - pipeline.tsx: 审核(8s)+在途资产(4s)纯读轮询加 document.hidden 守卫 (视频5s轮询驱动生成,保守不加;详见进度文档) 验证: tsc 0 · django check 0 · 14 路由 headless boot 0 报错 · 登录 726ms 无假延迟无邮箱 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
seaislee1209
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
afa8e07154
commit
8a0ae6a19d
@@ -107,6 +107,14 @@ else:
|
||||
}
|
||||
}
|
||||
|
||||
# 连接复用(development + production 共用):连远程 MySQL 时,默认每请求重开连接
|
||||
# (CONN_MAX_AGE=0),一次 TCP 握手 ~1.6s,登录时前端并发十几个接口逐个重握手 = 卡几十秒。
|
||||
# 复用连接 + 健康检查 + 连接超时,放在 base 让两套环境都生效(sqlite 测试库不受影响)。
|
||||
if DATABASES["default"]["ENGINE"].endswith("mysql"):
|
||||
DATABASES["default"]["CONN_MAX_AGE"] = 300
|
||||
DATABASES["default"]["CONN_HEALTH_CHECKS"] = True
|
||||
DATABASES["default"].setdefault("OPTIONS", {})["connect_timeout"] = 5
|
||||
|
||||
AUTH_USER_MODEL = "accounts.User"
|
||||
|
||||
AUTH_PASSWORD_VALIDATORS = [
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
from .base import * # noqa: F403
|
||||
from .base import DATABASES
|
||||
|
||||
|
||||
DEBUG = True
|
||||
|
||||
# 本地连云端 MySQL 时,默认每请求都重开连接(CONN_MAX_AGE=0),
|
||||
# 而到远程库一次 TCP 握手就 ~1.6s,登录时前端并发 ~12 个接口 → 每个都重握手 = 卡几十秒。
|
||||
# 复用连接 + 连接超时,本地体感立刻顺滑(仅 development 生效,不影响线上)。
|
||||
if DATABASES.get("default", {}).get("ENGINE", "").endswith("mysql"):
|
||||
DATABASES["default"]["CONN_MAX_AGE"] = 300
|
||||
DATABASES["default"]["CONN_HEALTH_CHECKS"] = True
|
||||
DATABASES["default"].setdefault("OPTIONS", {})["connect_timeout"] = 5
|
||||
# MySQL 连接复用(CONN_MAX_AGE / 健康检查 / connect_timeout)已上移到 base.py,
|
||||
# development 与 production 共用,此处不再重复设置。
|
||||
|
||||
@@ -330,7 +330,10 @@ export function App() {
|
||||
await Promise.all(active.map((segment) => api.pollVideo(activeProjectId, segment.id).catch(() => undefined)));
|
||||
const next = await api.project(activeProjectId).catch(() => null);
|
||||
// 晚到的旧项目轮询结果不要冲掉已切换的当前项目详情
|
||||
if (next && next.id === activeProjectIdRef.current) setProjectDetail(next);
|
||||
if (next && next.id === activeProjectIdRef.current) {
|
||||
// 视频生成动辄数分钟,多数 5s 轮次状态没变 —— 内容一致时跳过 setState,避免整棵管线每 5 秒空重渲染。
|
||||
setProjectDetail((prev) => (prev && JSON.stringify(prev) === JSON.stringify(next) ? prev : next));
|
||||
}
|
||||
}, [activeProjectId]);
|
||||
|
||||
// 静默刷新导出任务状态(进入拼接页 / 导出后回填成片),不弹 toast。
|
||||
|
||||
@@ -311,7 +311,7 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
|
||||
const img = taskImage[task.id];
|
||||
return (
|
||||
<article className="task-card history-card" key={task.id}>
|
||||
<div className={`placeholder${img ? " has-img" : ""}`}>{img ? <img src={img} alt={typeLabel} /> : <span className="ph-frame">{task.id.slice(0, 4)}</span>}</div>
|
||||
<div className={`placeholder${img ? " has-img" : ""}`}>{img ? <img src={img} alt={typeLabel} loading="lazy" decoding="async" /> : <span className="ph-frame">{task.id.slice(0, 4)}</span>}</div>
|
||||
<div className="history-body">
|
||||
<div className="history-name">{typeLabel}</div>
|
||||
<div className="history-type">// {task.task_type}</div>
|
||||
@@ -346,7 +346,7 @@ export function AssetFactoryPage({ navigate }: { navigate: (page: Page) => void
|
||||
<td>
|
||||
<div className="task-name-cell">
|
||||
<div className={`placeholder task-thumb${img ? " has-img" : ""}`}>
|
||||
{img ? <img src={img} alt={typeLabel} /> : <span className="ph-frame">{task.id.slice(0, 4)}</span>}
|
||||
{img ? <img src={img} alt={typeLabel} loading="lazy" decoding="async" /> : <span className="ph-frame">{task.id.slice(0, 4)}</span>}
|
||||
</div>
|
||||
<div>
|
||||
<div className="task-name">{typeLabel}</div>
|
||||
|
||||
@@ -802,6 +802,7 @@ export function PipelinePage(props: {
|
||||
let sawProcessing = false;
|
||||
let timer = 0;
|
||||
const tick = async () => {
|
||||
if (document.hidden) return; // 标签页切走时不空跑审核轮询(纯读,回前台自然恢复)
|
||||
const r = await api.pollReviews(project.id).catch(() => null);
|
||||
if (!alive) return;
|
||||
const map = (r?.reviews || {}) as Record<string, string>;
|
||||
@@ -2078,6 +2079,7 @@ export function PipelinePage(props: {
|
||||
let stopped = false;
|
||||
let timer = 0;
|
||||
const tick = async () => {
|
||||
if (document.hidden) { if (!stopped) timer = window.setTimeout(tick, 4000); return; } // 后台不空跑(纯读),保留心跳回前台即恢复
|
||||
try {
|
||||
const res = await api.pendingAssets(project.id);
|
||||
if (stopped) return;
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
// Wave 0 boot-integrity smoke (scratch). Visits every authed route with an injected
|
||||
// airshelf_token, captures console/page errors + a screenshot per route, then runs a
|
||||
// login-latency probe (proves the fake-delay removal + username-not-email field).
|
||||
import { chromium } from "playwright";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
const BASE = process.env.BASE || "http://localhost:5173";
|
||||
const TOKEN = process.env.TOKEN || "";
|
||||
const OUT = path.resolve(process.env.OUT || "../../../_qa_shots/wave0");
|
||||
fs.mkdirSync(OUT, { recursive: true });
|
||||
|
||||
const ROUTES = [
|
||||
"/", "/dashboard", "/products", "/projects", "/messages",
|
||||
"/account", "/team", "/settings", "/asset-factory",
|
||||
"/model-photo", "/image-optimize", "/platform-cover", "/library", "/pipeline"
|
||||
];
|
||||
|
||||
const NOISE = /favicon|net::ERR_|Failed to load resource.*(png|ico|svg|jpg|woff)|ResizeObserver/i;
|
||||
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: "light" });
|
||||
|
||||
const seed = await ctx.newPage();
|
||||
await seed.goto(BASE + "/", { waitUntil: "domcontentloaded" });
|
||||
await seed.evaluate((t) => localStorage.setItem("airshelf_token", t), TOKEN);
|
||||
await seed.close();
|
||||
|
||||
const results = [];
|
||||
for (const route of ROUTES) {
|
||||
const page = await ctx.newPage();
|
||||
const errs = [];
|
||||
page.on("console", (m) => { if (m.type() === "error") errs.push(m.text()); });
|
||||
page.on("pageerror", (e) => errs.push("PAGEERROR: " + (e.message || e)));
|
||||
let ok = true;
|
||||
try {
|
||||
await page.goto(BASE + route, { waitUntil: "load", timeout: 20000 });
|
||||
await page.waitForTimeout(1500);
|
||||
} catch (e) { ok = false; errs.push("NAV: " + e.message); }
|
||||
const name = route === "/" ? "root" : route.replace(/\//g, "");
|
||||
await page.screenshot({ path: path.join(OUT, `${name}.png`), fullPage: false }).catch(() => {});
|
||||
results.push({ route, ok, errors: errs.filter((e) => !NOISE.test(e)) });
|
||||
await page.close();
|
||||
}
|
||||
|
||||
// login-latency probe (fresh context, no token)
|
||||
const lctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
|
||||
const lp = await lctx.newPage();
|
||||
let login = { error: null };
|
||||
try {
|
||||
await lp.goto(BASE + "/login", { waitUntil: "load" });
|
||||
await lp.waitForTimeout(500);
|
||||
const hasUser = await lp.locator("#auth-username").count();
|
||||
const hasEmail = await lp.locator('input[type="email"]').count();
|
||||
await lp.fill("#auth-username", "airshelf");
|
||||
await lp.fill("#auth-pwd", "Restraint2026");
|
||||
const t0 = Date.now();
|
||||
await lp.click("button.btn-cta");
|
||||
let ms = -1;
|
||||
try {
|
||||
await lp.waitForFunction(() => !location.pathname.replace(/\/+$/, "").endsWith("/login") && location.pathname !== "/login", { timeout: 15000 });
|
||||
ms = Date.now() - t0;
|
||||
} catch { ms = -1; }
|
||||
await lp.waitForTimeout(800);
|
||||
await lp.screenshot({ path: path.join(OUT, "after-login.png") }).catch(() => {});
|
||||
login = { hasUsernameField: !!hasUser, hasEmailField: !!hasEmail, clickToLeaveLoginMs: ms, landedPath: lp.url() };
|
||||
} catch (e) { login = { error: e.message }; }
|
||||
await lctx.close();
|
||||
|
||||
await browser.close();
|
||||
|
||||
const summary = { base: BASE, routes: results, login };
|
||||
fs.writeFileSync(path.join(OUT, "summary.json"), JSON.stringify(summary, null, 2));
|
||||
console.log(JSON.stringify(summary, null, 2));
|
||||
Reference in New Issue
Block a user