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 等开发者工具。

你呢,中招没?

原文发布于微信公众号 - phodal(phodal-weixin)

原文发表时间:2017-06-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小叙

推荐两款简单好用的图片放大jquery插件

一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zo...

6869
来自专栏菩提树下的杨过

图片的javascript延时加载

在页面很长(超过3屏)且图片又很多时,默认情况下浏览器会加载所有图片,有可能导致第二屏的图片显示出来了,但第一屏的图片还在加载,这种情况最适合用"javascr...

2266
来自专栏知晓程序

一键搞定!小程序调用日历本该如此简单

2524
来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

1162
来自专栏jiajia_deng

react-router 环境使用锚点的方法

2372
来自专栏jiajia_deng

react-router 环境使用锚点的方法

1454
来自专栏前端小叙

jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)

最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property ‘msie’ of undefined。上jQuery网站上...

3526
来自专栏h5

支付宝小程序弹窗插件开发|仿微信/android/ios弹窗效果

支付宝小程序弹窗交互组件和微信小程序弹窗功能都差不多,对功能有比较多的限制,尤其想要实现丰富一些的弹窗场景就只能自己写组件实现了。

6272
来自专栏DeveWork

EaseMobile 主题导航菜单设置小图标的方法(图文+视频教程)

EaseMobile 主题的左侧的Off Canvas 侧边栏导航中是可以为每个菜单项设置小图标的。本文通过图文+视频教程为购买EaseMobile 主题的客户...

3718
来自专栏mathor

matlab—图形界面(GUI)程序设计

matlab也能做应用程序,类似于c++的mfc,这点我也是才知道,大吃一惊,原来现在可视化编程应用如此广泛,连matlab都可以,接下来我就会讲解如何通过ma...

3142

扫码关注云+社区

领取腾讯云代金券