嵌入式HTML5页面无法卸载的根源是WebView缺乏标准浏览器的卸载钩子，需手动清理DOM、事件监听器、定时器、Web Workers、Canvas/WebGL/音频上下文，并由native层可靠触发清理流程。
嵌入式设备上 HTML5 页面无法卸载的根源
嵌入式设备（如工业 HMI、车载终端、智能面板）通常用 WebKit 或 Blink 的轻量裁剪版渲染 HTML5，但它们没有标准浏览器的 document.unload 或 window.onbeforeunload 语义支持——这些钩子在无标签页模型、无进程隔离的嵌入式 WebView 中根本不会触发。
所谓“卸载”，实际是开发者想达成：释放 DOM 资源、清除定时器、断开 WebSocket、停止音频播放、回收 Canvas/WebGL 上下文。不主动做，就容易内存泄漏或卡死。
手动清理 DOM 和事件监听器的关键操作
不能依赖 location.href = 'about:blank' 或 document.write('')，它们只清空内容，不销毁节点引用。必须显式遍历并移除。
-
document.body.innerHTML = ''不够：残留事件监听器、MutationObserver、IntersectionObserver仍存活 - 应先调用
document.body.replaceChildren()（现代 WebView 支持），再手动遍历document.querySelectorAll('*')清理绑定的自定义属性（如data-listener-id） - 所有通过
addEventListener添加的监听器，必须配对调用removeEventListener；若用匿名函数，则需提前存引用，例如：const handler = () => { /* ... */ }; element.addEventListener('click', handler); // 卸载时 element.removeEventListener('click', handler);
Web Workers 和定时器必须显式终止
嵌入式设备内存紧张，遗留运行中的 Worker 或 setInterval 会持续占用资源，且无法被 GC 回收。
立即学习“前端免费学习笔记（深入）”；
-
Worker.terminate()必须调用，不能只关掉通信端口（port.close()） -
clearInterval(id)/clearTimeout(id)需保存所有 ID 到全局数组，卸载时批量清理：const timers = []; timers.push(setInterval(() => {}, 1000)); // 卸载时 timers.forEach(clearInterval); timers.length = 0; - 使用
requestAnimationFrame的动画循环，必须用cancelAnimationFrame(id)，否则即使页面不可见也持续调度
Canvas、WebGL 和音频上下文需主动关闭
这些资源由底层驱动直接管理，JS 层不显式释放，嵌入式 GPU/音频模块可能卡在 busy 状态，导致后续页面白屏或无声。
-
canvas.getContext('2d').reset()无效；应调用canvas.width = canvas.width重置缓冲区，并清除所有drawImage引用的ImageBitmap或HTMLImageElement - WebGL 上下文需调用
gl.getExtension('WEBGL_lose_context').loseContext()，再执行gl.deleteProgram等销毁操作 -
AudioContext必须调用audioCtx.close()；否则下次新建会失败（嵌入式 Audio HAL 通常只允许一个活跃实例）
真正的难点不在代码量，而在「谁来触发卸载」——很多嵌入式 WebView 没有导航栈概念，得靠外部 native 层发消息通知 JS 执行清理，这个信号通道本身就得设计成可重入、防重复触发的。
