站点升级手记 10：一次看板娘事故，PJAX 页面切换为什么不能粗暴重建 Canvas
问题现象
升级过程中，站点的 Live2D 看板娘在某些页面切换后出现了一个很大的红色圆形，看起来像背景，也像模型左眼或某个部件跑到了身体后面。最开始直觉会怀疑 CSS：是不是伪元素、光环、粒子或者背景层没清干净？
检查后发现，容器背景是透明的，伪元素也已经被禁用，页面里没有红色 CSS 候选元素。真正的问题在 canvas 里面，也就是 Live2D 模型渲染结果本身。
根因：销毁重建触发贴图错乱
Gallery 页面为了不挡住相册和播放器，会隐藏看板娘。之前的实现是在进入 Gallery 时删除 Live2D 容器，离开 Gallery 后重新创建 canvas 并重新初始化模型。这个做法看似直接，但对 Live2D 这种有内部渲染状态的组件并不友好。
模型资源、纹理、事件和 canvas 生命周期并不是普通 DOM 那么简单。反复删除和重建，可能导致部件贴图错位、事件绑定重复或渲染状态异常。
- CSS 背景透明不代表 canvas 内容正常。
- PJAX 页面切换会让组件生命周期变复杂。
- 对音频、canvas、Live2D 这类组件，要优先保留实例。
- 隐藏应该是 display none，而不是 removeChild 后重新 new。
最终修复
修复方式是：Gallery 页仍然隐藏看板娘，但不再销毁容器和 canvas，只给容器加一个 `is-pio-suspended` 状态；离开 Gallery 后移除这个状态，恢复同一个 Live2D 实例。这样既不会挡住 Gallery，也不会触发模型重建导致贴图错乱。
这个问题给我的提醒是：现代前端里，页面不是单纯的 HTML 替换。只要涉及持久播放器、canvas、WebGL、Live2D、评论系统或第三方 SDK，都需要明确生命周期，不能用粗暴的 DOM 替换解决所有问题。
相关推荐
开发者工具
请我喝咖啡
如果内容帮到了你，可以赞赏支持继续更新。
赏