v47:地址联想三处接入 / 读书页慢的真根因(会话锁)/ 笔记两处 / 日程状态下线
用户 2026-10-13 七条。拍板:影院只记地址、不存经纬度(后续用高德反查);
日程状态只删界面与展示、数据库列保留(「后续会有一个整体清理的工作」)。
①🔴 读书页慢 —— 真根因是**会话锁**,不是封面(我先判断错了方向)
用户原话:「读书现在还是非常慢,就是进入读书这个页面,刚开始还是非常的慢。」
线上实测(真公网、同一会话连打 3 次):
第 1 次 TTFB 0.08s ← 触发微信读书同步
第 2 次 TTFB **8.73s** ← 用户说的"刚开始非常慢"
第 3 次 TTFB 0.07s
插桩拿到的服务端时间线把因果钉死:
21:18:05.483 QUEUED ← 第 1 个请求排队
21:18:05.501 FINISH 2ms ← 响应确实提前发出去了(这步是好的)
21:18:14.674 SYNC 9.2s ← 但它仍占着这个人的会话文件锁跑完 9.2 秒
21:18:14.682 QUEUED ← 第 2 个请求此刻才真正开始执行
⇒ **`fastcgi_finish_request()` 只断开客户端连接、不释放 PHP 文件会话锁。**
后台同步要 9.2 秒(真打微信读书接口),同一个人的下一个请求一路等到它跑完。
修法(缺一不可):
· `WeRead::queueBackgroundSync()` 回调里 **先 `session_write_close()`、
再 `fastcgi_finish_request()`**(顺序不能反);
· `index.php` 两处"渲染前排同步"的入口排完**立刻放锁**
(shutdown 回调不一定执行:客户端中断/服务器超时才不放过);
· 顺带修 **`Holiday::queueBackgroundFetch()` 的同型问题**(联网 12 秒)。
为什么以前没发现:v29 引入"后台化"时只验证了"响应是不是提前发出去",
**单次请求测量永远看不到这个 bug** —— 必须同一会话连打两次才现形。
线上复验:修复后连打 4 次 = 0.15 / 0.15 / 0.09 / 0.15 秒(修复前第 2 次 8.73s);
后台同步仍正常(`weread_sync_at` 已更新)。
② 封面:顺手也修了(但这不是用户说的那个问题)
· `media.php` 读 OSS 前先放会话锁(原来从不放,35 张封面串行);
· 新增 `Storage::cacheLocally()` 磁盘二级缓存(原来 `read()` 只读不写回);
· 让 304 不再先拉整张图(原来先取回 body、再判 `If-None-Match`)。
线上实测:冷取 149ms(走 OSS)→ 热取 35ms(本地缓存、字节一致)
→ 带 `If-None-Match` 返回 **304 / 19.8ms / 空体**;35 张封面 103ms → 20ms(5 倍)。
③ 地址联想:抽成全站共用一份(`assets/js/addr_suggest.js`)+ 接入三处
· 影院管理页、观影新增页的「新建影院」弹框、日程地点、行程出发/到达;
· `layout.php` 按需加载(`[data-addr]` 出现才拉 SDK + 我们的脚本),
并暴露 `fbLoadAddr(scope)` 给 AJAX 片段(v42 踩过"内联 script 不执行");
· 安全密钥在 SDK 之前设置;回填支持 `data-addr-fill` / `data-addr-for`、
**只补空白字段**(不覆盖用户手写)、直辖市 `province==city` 去重;
· 字段名有两套(影院 `address`/`place`,行程 `from_addr`/`to_addr` 缩写 `_addr`),
`fieldFor()` 带同义词表 + 后缀匹配;
· 影院**只存地址、不存经纬度**(按用户要求)。
④ 笔记两条
· 「点保存没反应」真因:附件区是个 `<form>` **套在保存表单里** ——
HTML 不允许 form 套 form,浏览器丢掉内层标签、保留它的 `</form>`,
于是**保存按钮成了孤儿**(`button.form === null`),点了不提交也不报错。
真浏览器实测:修前 `btnInsideForm:false` / 点后 POST=0;修后 true / POST=1。
改法:附件区改 `<div id="noteAttForm">`,上传按钮用 `formaction`。
· 详情页宽度:`.note-read { max-width: 820px }` → `none`
(内容卡 820px vs 下方共享卡 1032px;修后两者都是 1032px)。
⑤ 日程状态下线
· 删表单里的「状态」下拉、`Calendar::statusWord()`、浮层 JSON 的 `status_word`;
· **保留** `events.status` 列与 `Calendar::statusOf()`(契约不动,等整体清理)。
验证(新增 5 个套件):
· `_fb_v47_addr.py`(接线 24 条)/ `_fb_v47_addr_sim.py`(真浏览器 + 假高德,16 条)
· `_fb_v47_readperf.py`(缓存与会话锁,23 条)
· `_fb_v47_notes.py`(真浏览器,9 条)
· `_b47_readperf_falsify.py`(反向验证 9 个注入)—— **9/9 全抓住**
· 全量 e2e **1510/0**;vCard 规格+往返 40/0;TB 探针 44/0;
v44 反向验证 17/0;全流水线 **PUSH_RC=0**(含"第47批形态"静态断言)
· **线上终验**:读书页整页 81ms、封面 103→20ms、media 冷 149→热 35→304 19.8ms、
修复前第 2 次请求 8.73s → 修复后 0.15s、地址联想 meta[fb-addr] 带真高德 key
顺带修掉三处**探针自身**的假红/假绿(详见 pitfalls.md):
· `_b44_falsify.py` 的"整小时"注入在**整点**与正确实现等价 ⇒ 换成恒错值;
· `_fb_b44_ui.py` 3b 的并发计时断言在单进程 `php -S` 下必然假红 ⇒ 改断言确定事实;
· 多处探针的"清理删除"撞沙箱删除门禁 ⇒ 探针**中途死掉**看起来像产品坏了
⇒ 统一改成 `_safe_rm()` / 不删。
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
/**
|
||||
* 家书 FamilyBook · **地址联想**(高德 AutoComplete)—— 全站一份
|
||||
*
|
||||
* 🔴 v47(用户 2026-10-13)三条:
|
||||
* ①「影院管理中,输入影院名称的时候,应该自动帮我补齐所在的地方和详细地址。」
|
||||
* ②「行程里面…输入出发地和到达地的时候,都需要调用高德的接口,补齐详细地址。」
|
||||
* ③「日程中,当我输入地点的时候,也应该调用高德的接口,补齐详细地址。」
|
||||
*
|
||||
* 为什么不再"每页各写一段":
|
||||
* 原来的做法是 `trips/node_form.php` 里自己写一段内联脚本。v42 已经因此踩过一次
|
||||
* (弹框是 AJAX 片段、内联 `<script>` 不执行 ⇒ 联想失效,只好抽了个 `fbNodeForm()`)。
|
||||
* 这次要接到**三处**(影院管理页、观影新增弹框、日程表单,而日程本身也是弹框),
|
||||
* 再各写一份必然出现"某个入口忘了补"——所以抽成这一份,谁用谁调 `fbAddr()`。
|
||||
*
|
||||
* ⚠️ 与项目其它按需资源同一套规矩:
|
||||
* · 脚本**按需加载**(页面上真有 `[data-addr]` 才拉,见 layout.php 的 fb-addr meta);
|
||||
* · SDK 的 key/安全密钥由 layout 注入(`window.FB_AMAP`),**本文件不碰配置**;
|
||||
* · **高德挂了也必须能用** —— 输入框仍是普通文本框,手敲照常保存。
|
||||
* 所以所有 AMap 的调用都在 `__AMAP_LOADED` 判断之后,一条都不在外面。
|
||||
*
|
||||
* ⚠️ 幂等:同一段表单可能被反复塞进 DOM(弹框开关),用 `data-addr-bound` 挡住重复绑定。
|
||||
* **但"绑定"要分两层**:input 的事件只绑一次;每次调用都要**重画一次**已有值
|
||||
* (因为重画后 DOM 是新的、可能带着服务端回填的地址)。
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// 高德 SDK 的就绪状态由 layout 注入的那段脚本维护(见 fb-addr 注入块)
|
||||
function sdkReady() {
|
||||
return !!(window.__AMAP_LOADED && typeof window.AMap !== 'undefined'
|
||||
&& window.AMap.AutoComplete);
|
||||
}
|
||||
|
||||
/** 把 location(AMap.LngLat 或 {lng,lat} 或字符串)统一成 {lng,lat} */
|
||||
function readLngLat(loc) {
|
||||
if (!loc) { return { lng: '', lat: '' }; }
|
||||
if (typeof loc === 'string') {
|
||||
var p = loc.split(',');
|
||||
return p.length >= 2 ? { lng: p[0].trim(), lat: p[1].trim() } : { lng: '', lat: '' };
|
||||
}
|
||||
var lng = (loc.lng !== undefined) ? loc.lng : (loc.getLng ? loc.getLng() : '');
|
||||
var lat = (loc.lat !== undefined) ? loc.lat : (loc.getLat ? loc.getLat() : '');
|
||||
return { lng: lng === null || lng === undefined ? '' : lng,
|
||||
lat: lat === null || lat === undefined ? '' : lat };
|
||||
}
|
||||
|
||||
/**
|
||||
* 取"所在地方"。
|
||||
*
|
||||
* ⚠️ 高德的返回有**两套字段**,要看运气:
|
||||
* · `poi.addressComponent.{province,city,district}` —— 结构化三级;
|
||||
* · `poi.pname / cityname / adname` —— 老式平铺字段。
|
||||
* 实测两者不是同时都有。取到哪级用哪级,取不到就留空(**绝不瞎编**)。
|
||||
* @returns {string} 形如 "青岛市 市南区" / "青岛" / ''(都没有)
|
||||
*/
|
||||
function readPlace(poi) {
|
||||
var a = poi.addressComponent || null;
|
||||
var province = '', city = '', district = '';
|
||||
if (a) {
|
||||
// ⚠️ 直辖市的 province 与 city 会**同时**是"北京市",拼起来变"北京市 北京市"
|
||||
// ⇒ 相同时只留一份。
|
||||
province = String(a.province || '').trim();
|
||||
city = String(a.city || '').trim();
|
||||
district = String(a.district || '').trim();
|
||||
}
|
||||
if (!province && !city && !district) {
|
||||
province = String(poi.pname || '').trim();
|
||||
city = String(poi.cityname || '').trim();
|
||||
district = String(poi.adname || '').trim();
|
||||
}
|
||||
var parts = [];
|
||||
if (province) { parts.push(province); }
|
||||
if (city && city !== province) { parts.push(city); }
|
||||
if (district) { parts.push(district); }
|
||||
return parts.join(' ');
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定一个地址输入框。
|
||||
*
|
||||
* @param {HTMLElement} input 那个要联想的输入框(必须有 `data-addr`)
|
||||
* @param {HTMLElement} scope 可选:限定字段查找范围(弹框里的一段表单)
|
||||
*/
|
||||
function bindOne(input, scope) {
|
||||
if (!input || input.getAttribute('data-addr-bound') === '1') { return; }
|
||||
input.setAttribute('data-addr-bound', '1');
|
||||
|
||||
// 字段查找范围:`data-addr-for` 给的是一个选择器。
|
||||
// 🔴 必须优先取**最近的那个**祖先(`closest`),不能 `querySelector` 取第一个 ——
|
||||
// 行程表单里 from / to 两组字段都在页面上,取第一个会把出发地的地址
|
||||
// 写到到达地上("填错了但看起来像填对了",最难查)。
|
||||
// 取不到祖先时才退回:先按选择器全局取第一个,最后退回 scope/document。
|
||||
var root = null;
|
||||
var forSel = input.getAttribute('data-addr-for');
|
||||
if (forSel) {
|
||||
try { root = input.closest(forSel); } catch (e) { root = null; }
|
||||
if (!root) { root = (scope || document).querySelector(forSel); }
|
||||
}
|
||||
if (!root) {
|
||||
root = (scope || document);
|
||||
}
|
||||
|
||||
function fieldFor(target) {
|
||||
if (!target) { return null; }
|
||||
// 🔴 同一个"逻辑字段"在项目里有两套命名,必须都认(v47 实测踩到):
|
||||
// · 影院页 —— 全拼:`address` / `place`
|
||||
// · 行程地点 —— 缩写:`from_addr` / `to_addr`(`_addr`,不是 `_address`)
|
||||
// 只认全拼的话 `[name$="address"]` 匹配不到 `from_addr`
|
||||
// (`from_addr` 以 `_addr` 结尾)⇒ 地址永远填不进去,
|
||||
// 而"名字和经纬度都填上了"会让人误以为整个回填是好的。
|
||||
var SYN = {
|
||||
address: ['address', 'addr'],
|
||||
addr: ['addr', 'address'],
|
||||
place: ['place', 'city'],
|
||||
city: ['city', 'place'],
|
||||
lng: ['lng'],
|
||||
lat: ['lat'],
|
||||
};
|
||||
var names = SYN[target] || [target];
|
||||
for (var k = 0; k < names.length; k++) {
|
||||
var nm = names[k];
|
||||
// ① 精确名
|
||||
var el = root.querySelector('[name="' + nm + '"]');
|
||||
if (el) { return el; }
|
||||
// ② 带前缀的(`from_addr`)—— 后缀匹配
|
||||
// ⚠️ 能安全用后缀,是因为 `root` 已经收窄到**这一组**字段的容器
|
||||
// (`data-addr-for=".loc-field"` + `closest`):
|
||||
// 出发/到达两组字段在各自的 .loc-field 里,互不可见。
|
||||
// 若在整页范围做后缀匹配,`from_addr` 与 `to_addr` 会互相抢。
|
||||
try {
|
||||
var cands = root.querySelectorAll('[name$="' + nm + '"]');
|
||||
if (cands.length) { return cands[0]; }
|
||||
cands = root.querySelectorAll('[name$="_' + nm + '"]');
|
||||
if (cands.length) { return cands[0]; }
|
||||
} catch (e) { /* 极老浏览器不支持 $= ⇒ 找不到就不填,不报错 */ }
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
var targets = (input.getAttribute('data-addr-fill') || '')
|
||||
.split(',').map(function (s) { return s.trim(); })
|
||||
.filter(Boolean);
|
||||
|
||||
// 手敲也要能被"补齐"(用户可能不用联想直接打字,或 SDK 没加载)
|
||||
// —— 这里只在**选了候选**时填,避免把用户手写的地址覆盖掉。
|
||||
|
||||
if (!sdkReady()) { return; } // 降级:没有联想,输入与保存都正常
|
||||
|
||||
try {
|
||||
var ac = new window.AMap.AutoComplete({ input: input });
|
||||
ac.on('select', function (e) {
|
||||
var poi = (e && e.poi) ? e.poi : null;
|
||||
if (!poi) { return; }
|
||||
|
||||
// 输入框里放**名字**(用户认的是名字,不是"一串门牌号")
|
||||
var name = String(poi.name || '').trim();
|
||||
if (name !== '') { input.value = name; }
|
||||
|
||||
targets.forEach(function (t) {
|
||||
var el = fieldFor(t);
|
||||
if (!el) { return; }
|
||||
// 🔴 只填**空白**的字段。理由(用户 2026-10-13 要的是"自动补齐"):
|
||||
// 用户可能已经在地址栏手写了更细的门牌("3 号楼 2 单元"),
|
||||
// 高德给的 `address` 只是"到路口/到楼"的粒度 —— 直接覆盖会把他写的东西抹掉,
|
||||
// 而"抹掉用户输入"是不可逆的(他点保存后就真没了)。
|
||||
// ⇒ 空着才补;已经有内容就尊重用户的。
|
||||
if (String(el.value || '').trim() !== '') { return; }
|
||||
if (t === 'place' || t === 'city') {
|
||||
var pl = readPlace(poi);
|
||||
if (pl !== '') { el.value = pl; }
|
||||
} else if (t === 'address' || t === 'addr') {
|
||||
var ad = String(poi.address || '').trim();
|
||||
if (ad !== '') { el.value = ad; }
|
||||
} else if (t === 'lng' || t === 'lat') {
|
||||
var ll = readLngLat(poi.location);
|
||||
var v = (t === 'lng') ? ll.lng : ll.lat;
|
||||
if (v !== '') { el.value = v; }
|
||||
}
|
||||
});
|
||||
|
||||
// 让调用方知道"值被程序改过"(有些页面要跟着重画/联动)
|
||||
try {
|
||||
input.dispatchEvent(new CustomEvent('fb-addr-picked', {
|
||||
bubbles: true,
|
||||
detail: { name: name, place: readPlace(poi), address: String(poi.address || '') }
|
||||
}));
|
||||
} catch (err) { /* 老浏览器没有 CustomEvent 构造器,忽略即可 */ }
|
||||
});
|
||||
} catch (err) {
|
||||
/* SDK 已加载但初始化失败(key 没绑域名等)—— 静默降级,不打扰用户 */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化(**可重复调用**)。
|
||||
* @param {HTMLElement|Document} scope 限定范围;缺省 = 整页
|
||||
*/
|
||||
function fbAddr(scope) {
|
||||
var root = scope || document;
|
||||
var inputs = Array.prototype.slice.call(root.querySelectorAll('[data-addr]'));
|
||||
inputs.forEach(function (el) { bindOne(el, root); });
|
||||
}
|
||||
|
||||
window.fbAddr = fbAddr;
|
||||
|
||||
// 首屏跑一次。⚠️ 脚本是 defer 加载的,此时 DOM 已解析完(在 </body> 前引入亦可)。
|
||||
fbAddr(document);
|
||||
|
||||
/* 通知"我上线了"。
|
||||
⚠️ 为什么需要:调用方(行程/影院/日程的弹框)可能在**本脚本加载之前**
|
||||
就把 `fbLoadAddr()` 调过了 —— 那种情况下它的 `window.fbAddr` 判断会落空。
|
||||
它们监听这个事件补一次(见 trips/node_form.php 的 initNodeForm)。 */
|
||||
try {
|
||||
window.dispatchEvent(new Event('fb-addr-ready'));
|
||||
} catch (e) {
|
||||
/* 老浏览器没有 Event 构造器(极少)—— 调用方还有 fbAddr 兜底,不影响功能 */
|
||||
}
|
||||
})();
|
||||
@@ -176,6 +176,13 @@
|
||||
if (window.fbNodeForm) { window.fbNodeForm(bodyEl()); }
|
||||
if (typeof window.fbLoadPicker === 'function') { window.fbLoadPicker(); }
|
||||
if (typeof window.fbInitPickers === 'function') { window.fbInitPickers(bodyEl()); }
|
||||
/* 🔴 v47(用户 2026-10-13):**地址联想**也要补一次。
|
||||
「日程里输入地点要调高德」「行程的出发/到达地要调高德」——
|
||||
这两处的编辑表单都是走这条 AJAX 换片段的路径进来的,
|
||||
而 layout 的按需加载只在**首屏**扫过一次 `[data-addr]`
|
||||
⇒ 片段里的地点框没人绑,联想永远不出现(正是 v42 在行程上踩过的同一个坑:
|
||||
内联 script 不执行 + 没人补初始化)。 */
|
||||
if (typeof window.fbLoadAddr === 'function') { window.fbLoadAddr(bodyEl()); }
|
||||
// 标题取表单片段里的自我描述(各模板的弹框头)
|
||||
var h = picked.form.querySelector('.cal-modal-head b')
|
||||
|| (html.match(/aria-label="([^"]*编辑[^"]*)"/) || [])[1];
|
||||
|
||||
Reference in New Issue
Block a user