IT资源栈一家 ToC 公司近期收到大量客户投诉，称其网站在 360 浏览器中打开时出现无限加载（“一直转圈”）现象，导致页面无法操作。开发团队初期排查未果，常规手段如清理缓存、禁用扩展及重装浏览器均未能根治。随着问题爆发范围扩大，开发人员通过 DevTools 暂止调试，最终锁定了问题源——水印插件 `watermark-js-plus` 与 360 浏览器近期更新的 AI 插件发生了 DOM 冲突。具体原因在于，360 AI 插件会自动向 `body` 底部注入 `#ai-assistant` 节点，而水印组件使用 `MutationObserver` 严格监听 DOM 变化，并强制确保自身挂载在 `body` 最后一个子节点的位置。这导致 AI 插件和水印插件陷入一种“互相抢座”的死循环：一方插入节点导致另一方失去末尾位置，进而触发重绘和节点争夺，最终消耗大量资源导致页面假死。目前，通过关闭水印插件的 `mutationObserve` 监听配置已解决此问题，相关 Issue 已在 GitHub 社区反馈。
事件分析
该事件是浏览器厂商集成 AI 功能与现有 Web 开发生态产生摩擦的典型案例。随着 AI Agent 和侧边栏助手成为浏览器标配，其往往通过直接注入 DOM 节点来改变页面结构，这种隐式的“环境劫持”极易与前端开发者现有的 DOM 监听逻辑（如 MutationObserver）发生冲突。此次死循环事故并非复杂的代码错误，而是两个合理的自动化逻辑在特定上下文中产生的非预期交互。这警示开发者，在编写高鲁棒性前端代码时，需为第三方插件的 DOM 侵入预留容错空间。同时也暴露出浏览器厂商在集成 AI 功能时，对现有页面的干扰机制设计尚不成熟，未来需要更严格的隔离策略。
💡 核心观点：浏览器 AI 插件的强行介入打破了传统 DOM 控制边界，开发者需警惕智能体带来的“环境毒化”效应。
原文链接：V2EX 分享发现
评论前必须登录！
立即登录 注册