公司一个 toC 的网站,突然在近期大量收到客户反馈在 360 浏览器 中打开 一直转圈,无法正常加载页面,无法正常操作。
一开始我们部门本地下载 360 浏览器 测试没问题,只有个别客户有这个问题,没研究出来是什么导致的。尝试过:
- 清理浏览器缓存
- 使用无痕访问
- 禁用所有浏览器插件
- 关闭所有可疑设置
- dev tools 中禁止插件的 css 、js 加载
问题依旧,最后试了下重装 360 浏览器,问题解决了。然后就开始了漫长的客服转接客户,让客户自己重装或者帮客户远程重装浏览器的工作。
事情的转机是昨天,昨天突然又新增一批客户反馈 360 浏览器 打开网页转圈,我们测试发现本地也有这个问题,并且重装已经解决不了问题了!!!只能推荐客户更换 Chrome 或者 Edge 。
客户用惯了 360 浏览器,有书签、浏览历史、密码记录,并且不想多装软件,担心多安装的软件让系统卡顿(小声 bb:难道 360 浏览器不是更毒瘤吗?)并且
「别的网站、同类网站在 360 浏览器是正常的,就你们的不行,这就是你们的问题」
没办法只能硬着头皮找问题,开始尝试联系 360 浏览器 工程师、客服,在 360 论坛中发帖,试了下我司别的站点,发现凡是我司的站点就都有问题,明明项目有的是 vue2 ,有的是 vue3 应该不是架构的问题,开始找共同点:域名?服务器?用到的 npm 包?
最后在一次机缘巧合下我在 360 浏览器 dev tools 来源面板点击了调试的 暂停⏸ 按钮,发现停在了 vendor.js 中,运行再暂停,又回到了这里,代码没有混淆加密上下看了下,是一个 水印插件「 watermark-js-plus 」,立即注释掉水印插件的代码,发现问题完美解决了。这个时候 360 浏览器 的工程师 QQ 上才联系我,我给他反馈了问题,并且去水印插件 github issues 准备反馈问题,才发现有人已经在一天前反馈了问题。
我开始找问题出现的根本原因,最后定位到是 360 浏览器 近期更新了 Ai 插件,插件会自动往 body 最后插入一个 #ai-assistant 节点,水印插件使用了 MutationObserver api 监听 body 节点的变化,当水印节点不是 body 最后一个元素就会销毁并在最后插入一个新的水印节点,Ai 插件发现自己不是 body 最后一个节点就会把自己插入到最后一个节点。
所以为什么 360 浏览器 要把自己插到 body 最后?并且在插件列表中找不到这个插件,无法禁用。关闭所有 ai 设置功能后仍在往页面中插入 ai 节点???
最后的解决方案:水印组件提供了「 mutationObserve 」监听配置,设置为 false 即可,又或者修改水印挂载位置,不要挂载到 body 最后即可。
我已投降,我已绝望,我已崩溃,我已无助,一直没遇到过这么奇怪的问题,真的搞得人头都大了。
挂个 github issues 吧: https://github.com/zhensherlock/watermark-js-plus/issues/1396
