昨天下午休息的时候,发现我工作用的 Mac Mini 在疯狂地散热中,打开 Activity Manger 发现是 Chrome 浏览器导致的,再打开 Chrome 的 Task Manager 发现是 Developer Tools,如下图所示:
Chrome Task Manager
内存正常,但是这个 CPU,有点夸张。
于是,我:
便怀疑是插件的问题,然后就手动地一个个开启,发现是 React Dev Tools 的问题。整理了一下触发这个问题的条件:
随后,在 React Dev Tool 的 GitHub 上发现了相应的 issue:High CPU when tab is in background #739
而触发 Issue 的代码则是:
var loadCheckInterval = setInterval(function() { createPanelIfReactLoaded();}, 1000);
但是,这个文件从 2015 年后,就没有修改过了:
React DevTool main.js 修改时间
那么,问题就出现在 setInterva
方法里。
于是,自己我便提取了相关的插件:chrome-59-show-setinterval-issue-code
而在这个方法里,关键点是:
chrome.devtools.inspectedWindow.eval(`jQuery.fn.jquery`, function(pageHasReact, err) {});
后来,发现有相当多的插件会使用这样的方式,来对检测是否含相应的环境,如:
因为我没有 Windows 电脑,所以没有试过。在他们的代码里都有相似的 setInterval,如 const checkVueInterval =setInterval(createPanelIfHasVue,
1000)
然后 CPU 就~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
已向 Chrome 报 Bug 了。
因此
如果你最近用的 Chrome 59 也异常,请禁用 React、Vue、Ember 等开发者工具。
如果你最近用的 Chrome 59 也异常,请禁用 React、Vue、Ember 等开发者工具。
你呢,中招没?