| Name |
Last commit
|
Last update |
|---|---|---|
| .. | ||
| img | ||
| src | ||
| tests | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| playwright.config.js | ||
| playwright.device.config.js | ||
| vite.config.js |
图片性能:列表里 40px 的小图原本加载的是完整原图。实测单张 1672x941 的 PNG 约 1.8MB,一页 20 条最多 40 张,需要传输约 72MB、浏览器解码后常驻内存约 250MB;每页条数还能选到 50,翻倍到 180MB / 630MB。图片接口又没有任何缓存头, 每次刷新、翻页回来都要重下一遍。 改法分四层: - 保存时用 ImageReader 降采样解码,一次完成格式校验和长边 240px 缩略图生成。 实测 1890KB -> 4KB,耗时 82ms,比原先只做校验的全图解码(119ms)还快。 缩略图先写临时文件再原子替换,并发补生成不会读到半截文件。 - 列表和弹窗预览改用缩略图,只有点开大图才请求原图;历史图片首次被请求时 自动补生成一次并落盘。 - 图片接口加 Cache-Control: max-age=1年, private, immutable。文件名是随机 UUID、内容永不改写,换图必然换标识,所以缓存安全;用 private 而非 public, 避免受登录态保护的图片被共享代理缓存后发给别人。 - 列表图加 loading=lazy、悬停时预取并解码原图,点开大图几乎无等待。 上传交互:上传控件此前没有 accept 属性,系统文件框要枚举目录下所有类型的 文件;预览又把原图直接塞进 104x78 的框,浏览器同步解码整张图会明显卡顿。 现在限定图片类型,并用 createImageBitmap 异步解码后缩到 320px 再显示, 上传的仍是未经处理的原始文件。 设备编号:设备名称输入框加一键生成下一个「前缀N号机」。编号由后端在全库范围 计算,不按当前页推算——一页只有 20 条,最大编号很可能在别的页上,按当前页 算会撞上已存在的名字被唯一性校验打回。前缀限定 1-20 位中英文数字,因为它要 拼进 LIKE 条件,% 和 _ 会被当通配符。 列表同时去掉编号列、图片挪到首列并支持展示两张、无图与加载失败统一显示占位框、 更新时间只保留日期。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
| Name |
Last commit
|
Last update |
|---|---|---|
| .. | ||
| img | Loading commit data... | |
| src | Loading commit data... | |
| tests | Loading commit data... | |
| index.html | Loading commit data... | |
| package-lock.json | Loading commit data... | |
| package.json | Loading commit data... | |
| playwright.config.js | Loading commit data... | |
| playwright.device.config.js | Loading commit data... | |
| vite.config.js | Loading commit data... |