Polymer导致IE11与Edge中F12工具响应极慢问题咨询

我来帮你拆解这个困扰你的调试卡顿问题——我之前也帮不少开发者排查过类似的Polymer旧版本兼容问题，核心原因和可落地的优化方向如下：

一、问题到底出在哪？ #

这个卡顿的核心是Polymer 2.x的组件封装机制，结合Web Components polyfill在旧IE/Edge的DevTools环境下的双重性能消耗，具体拆解成几个关键点：

• Polymer的DOM操作触发大量调试钩子：Polymer 2.x依赖polymer.html实现的模板实例化、模拟Shadow DOM等逻辑，在IE11这类不支持原生Web Components的浏览器中，polyfill会把这些非原生DOM结构转换成IE能识别的节点。当你打开DevTools时，浏览器会给每个DOM节点注入调试追踪钩子，Polymer的高频DOM操作会疯狂触发这些钩子的回调，直接把主线程堵死。
• Polymer与polyfill的调试逻辑叠加：单独用webcomponents-lite.js时问题不明显，是因为Polyfill本身不会主动做这么多DOM操作，但Polymer会调用polyfill的内部API来实现组件封装，开启DevTools后，polyfill的调试日志和节点追踪会被Polymer的操作放大，尤其是你用的v1.1.1版本的polyfill，完全没针对IE DevTools做性能优化。
• 旧浏览器DevTools本身的性能瓶颈：IE11和旧版Edge的开发者工具性能本身就有限，当页面里有大量被polyfill转换后的嵌套DOM节点（Polymer组件会生成一堆模拟Shadow DOM的节点），DevTools要遍历解析所有节点的调试信息，这个过程在高频操作下直接被拉长到数分钟。

二、能怎么优化？ #

给你几个亲测有效的优化方案，按优先级排序：

• 先关Polymer的调试通知：在引入polymer.html之前，先加这段全局配置，直接砍掉Polymer的调试钩子触发：

  window.Polymer = {
    suppressTemplateNotifications: true,
    suppressWarning: true,
    lazyRegister: true
  };
  

  suppressTemplateNotifications是关键，它会关闭模板实例化时的调试通知，能大幅减少DevTools的钩子触发次数。
• 升级Web Components Polyfill：虽然你说旧版本也有问题，但试试升级到webcomponentsjs v2.x的兼容版本（要匹配Polymer 2.x的支持范围），新版本针对IE11的DevTools做了不少性能优化，砍掉了不必要的节点追踪逻辑。
• 简化调试页面：调试时别用完整的业务页面，搞个最小化的测试页，只引入要调试的单个组件和必要的polyfill，减少DOM节点数量，DevTools解析起来就快多了。
• 临时关闭脚本调试（应急用）：如果只是要查看DOM结构，暂时关掉DevTools的「脚本调试」功能，这样浏览器不会注入调试钩子，DevTools秒开，但代价是没法调试JS代码，适合快速看DOM的时候用。
• 考虑迁移到Polymer 3.x（长期方案）：Polymer 3.x改用ES Modules，减少了对DOM模板的依赖，配套的polyfill也优化了IE11下的性能，虽然迁移需要点成本，但能从根源上解决这类调试卡顿问题。

内容的提问来源于stack exchange，提问作者Markus