React、Vue、Ember 及其他前端开发者,请暂缓更新到 Chrome 59 浏览器

时间:2022-04-25
本文章向大家介绍React、Vue、Ember 及其他前端开发者,请暂缓更新到 Chrome 59 浏览器,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

昨天下午休息的时候,发现我工作用的 Mac Mini 在疯狂地散热中,打开 Activity Manger 发现是 Chrome 浏览器导致的,再打开 Chrome 的 Task Manager 发现是 Developer Tools,如下图所示:

Chrome Task Manager

内存正常,但是这个 CPU,有点夸张。

于是,我:

  • 新起了一个用户进程,发现没有这个问题
  • 把自用的浏览器插件都禁掉,发现正常
  • 关了 Developer Tool,也发现不会出现这个情况

便怀疑是插件的问题,然后就手动地一个个开启,发现是 React Dev Tools 的问题。整理了一下触发这个问题的条件:

  1. Chrome 浏览器里安装了 React Dev Tool 插件
  2. 在 Tab 1 中打开了 Chrome 的 Developer tool
  3. 切换到 Tab 2,让 Tab 1 与 Dev Tool 在后台运行

随后,在 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) {});

后来,发现有相当多的插件会使用这样的方式,来对检测是否含相应的环境,如:

  • Vue DevTools
  • React Dev Tools
  • Ember Inspector
  • 等等

因为我没有 Windows 电脑,所以没有试过。在他们的代码里都有相似的 setInterval,如 const checkVueInterval =setInterval(createPanelIfHasVue, 1000)

然后 CPU 就~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

已向 Chrome 报 Bug 了。

因此

如果你最近用的 Chrome 59 也异常,请禁用 React、Vue、Ember 等开发者工具。

如果你最近用的 Chrome 59 也异常,请禁用 React、Vue、Ember 等开发者工具。

你呢,中招没?