Skip to content

Commit fb52c29

Browse files
committed
fix: 去掉易误判的 worker 握手,资源自检改用确定性判断
上一版的 hello 握手设了 3s 超时,但网络慢时握手本来就赶不回来, 结果在正常环境下也报「脚本过旧」。改成检查页面已同步加载的 render.js 是否具备新接口(无竞态、无超时),worker 侧仍由生成后的 result.style 校验兜底,旧 worker 会被明确拦截而不是静默出油画。 同时把 OIL_BUILD 升到 -b 触发缓存更新。
1 parent 45e9c50 commit fb52c29

4 files changed

Lines changed: 19 additions & 51 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,8 @@ window.OIL_BUILD = '20261111-4style';
6868
浏览器会把它当成全新 URL 去取。`worker.js` 也会把这个查询串透传给 `importScripts('core.js')`,
6969
保证 worker 和 core 版本一致。
7070

71-
另外页面有两道兜底:
72-
- 启动时用一次性 worker 做 `hello` 握手,版本对不上就直接提示强制刷新;
73-
- 生成完成后校验 `result.style` 是否等于用户选的风格,不匹配就报错而不是静默出图。
71+
生成完成时页面会校验 `result.style` 是否等于用户选的风格——旧版 worker 不认识
72+
`style` 字段,不匹配就明确报错提示强制刷新,**不会静默输出一张油画糊弄过去**。
7473

7574

7675
## 技术实现

‎build.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77
* 解决办法:所有脚本引用都带上 ?v=BUILD 查询串,每次发布改 BUILD 值即可
88
* 让浏览器当成全新 URL 去取。这里集中管理,避免各处漏改。
99
*/
10-
window.OIL_BUILD = '20261111-4style';
10+
window.OIL_BUILD = '20261111-4style-b';

‎index.html‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -297,37 +297,21 @@ <h2>说明</h2>
297297
let worker = null, result = null, curStyle = 'oil';
298298

299299
/* ---------------- 版本自检 ----------------
300-
* 静态资源被 CDN 缓存住时,可能出现「新页面 + 旧脚本」。这里起一个一次性
301-
* worker 做握手:新版 worker 会回 build 字段,旧版不会(它只认 generate)。
302-
* 这样能在用户点「开始生成」之前就提醒,而不是等整张图跑完才发现风格没生效。
303-
* 真正的兜底是生成时的 result.style 校验,这里只是提前给个提示。
300+
* 静态资源被 CDN 缓存住时,可能出现「新页面 + 旧脚本」。
301+
*
302+
* 这里不再靠 worker 握手(网络慢时握手容易超时误判),而是直接检查
303+
* 页面已加载的 render.js 是不是新版——它是 <script> 同步引入的,
304+
* 浏览器要么拿到新版要么拿到旧版,判断确定、无竞态。
305+
* worker 那侧的兜底是生成完成后对 result.style 的校验。
304306
*/
305-
(function checkWorkerVersion() {
306-
let w;
307-
try {
308-
w = new Worker('worker.js?v=' + encodeURIComponent(window.OIL_BUILD || Date.now()));
309-
} catch (_) { return; }
310-
let done = false;
311-
const finish = ok => {
312-
if (done) return;
313-
done = true;
314-
try { w.terminate(); } catch (_) {}
315-
if (!ok) {
316-
setTimeout(() => {
317-
if (curImg) return; // 已经选好图就别覆盖提示
318-
setStat('浏览器缓存了旧版脚本,建议按 Ctrl+F5(Mac 为 ⌘+Shift+R)强制刷新。', true);
319-
}, 0);
320-
}
321-
};
322-
const timer = setTimeout(() => finish(false), 3000);
323-
w.onmessage = e => {
324-
if (e.data && e.data.type === 'hello') {
325-
clearTimeout(timer);
326-
finish(e.data.build === window.OIL_BUILD && e.data.styles === 4);
327-
}
328-
};
329-
w.onerror = () => { clearTimeout(timer); finish(false); };
330-
w.postMessage({ type: 'hello' });
307+
(function checkAssetVersion() {
308+
const ok = !!(window.OILRender && window.OILRender.paintGround && window.OILRender.preprocess);
309+
if (!ok) {
310+
setTimeout(() => {
311+
if (curImg) return;
312+
setStat('页面脚本未正确加载,请按 Ctrl+F5(Mac 为 ⌘+Shift+R)强制刷新。', true);
313+
}, 0);
314+
}
331315
})();
332316

333317
/* ---------------- 风格卡片 ---------------- */

‎worker.js‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
11
/* 生成 worker:把分析 + 笔触 + 时间轴跑在后台线程,避免界面卡死 */
2-
/* core.js 同样会被 CDN 强缓存,必须把本 worker 的查询串透传下去,
3-
* 否则会出现「新 worker + 旧 core」,风格依然失效。 */
2+
/* core.js 同样会被 CDN 强缓存,把本 worker 的查询串透传下去,
3+
* 避免出现「新 worker + 旧 core」。 */
44
importScripts('core.js' + (self.location && self.location.search ? self.location.search : ''));
55

6-
/* 握手:新版会回自己的 build 与风格数,旧版不会。
7-
* 页面用它判断浏览器有没有命中缓存里的旧脚本(见 index.html 的 checkWorkerVersion)。 */
8-
const BUILD = '20261111-4style';
9-
106
self.onmessage = function (e) {
117
const msg = e.data;
12-
13-
if (msg.type === 'hello') {
14-
self.postMessage({
15-
type: 'hello',
16-
build: BUILD,
17-
styles: Object.keys(OILCore.STYLES || {}).length,
18-
styleKeys: Object.keys(OILCore.STYLES || {}),
19-
});
20-
return;
21-
}
22-
238
if (msg.type !== 'generate') return;
249

2510
const { rgba, w, h, opts } = msg;

0 commit comments

Comments
 (0)