用了这个浏览器功能，前端页面直接崩溃了，咋搞啊？

文章预览

来源 丨 经授权转 自  前端充电宝（ID：FE-Charge） 作者 丨 CUGGZ 你是否遇到过这样的场景：在浏览器中使用谷歌 翻译 功能后，网页突然崩了，控制台错误： 这一切的罪魁祸首，其实是谷歌翻译悄悄修改了你的页面结构！下面就来简单解释原因和解决方案。 谷歌翻译如何“搞破坏”？ 我们先看看谷歌翻译是如何工作的。 下面是未翻译的文字的 HTML 结构： 翻译之后文字的 HTML 结构是这样的： 翻译引擎将纯文本节点包裹在 标签中，这种看似无害的操作，却为现代前端框架埋下了定时炸弹。 两大致命场景 场景1：状态更新失效 对于像React这样的现代前端框架，它们依赖虚拟DOM来提高性能。当组件的状态或属性发生变化时，React会基于虚拟DOM的状态来操作真实DOM。然而，当真实DOM被谷歌翻译修改后，原节点的位置和状态与React的预期不一致，导致更新操 ………………………………