React、Vue、Ember 及其他前端开发者,请暂缓更新到 Chrome 59 浏览器
昨天下午休息的时候,发现我工作用的 Mac Mini 在疯狂地散热中,打开 Activity Manger 发现是 Chrome 浏览器导致的,再打开 Chrome 的 Task Manager 发现是 Developer Tools,如下图所示:
Chrome Task Manager
内存正常,但是这个 CPU,有点夸张。
于是,我:
- 新起了一个用户进程,发现没有这个问题
- 把自用的浏览器插件都禁掉,发现正常
- 关了 Developer Tool,也发现不会出现这个情况
便怀疑是插件的问题,然后就手动地一个个开启,发现是 React Dev Tools 的问题。整理了一下触发这个问题的条件:
- Chrome 浏览器里安装了 React Dev Tool 插件
- 在 Tab 1 中打开了 Chrome 的 Developer tool
- 切换到 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 等开发者工具。
你呢,中招没?
- CCCF 微软沈向洋:理解自然语言:表述、对话和意境
- Linux进程基础
- Android Studio导入项目非常慢的解决办法
- Android开发中遇到的requestFeature() must be called before adding content异常
- Linux信号基础
- 剑指OFFER之合并有序链表(九度OJ1519)
- Android Studio快捷键每日一练(6)
- Linux文本流
- Linux并发与同步
- Android Studio快捷键每日一练(5)
- 2017年移动行业五大发展趋势及2018年前景展望(下)
- 剑指OFFER之反转链表(九度OJ1518)
- Android Studio快捷键每日一练(4)
- Android Studio快捷键每日一练(3)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux系列之下载安装jdk-8u261-linux-i586.tar.gz
- 常见网页特效案例
- MySQL系列之体系结构原理学习笔记
- 触屏事件
- 10.2【前端开发】图片文件格式:常见的图片格式对比有何优劣以及如何使用Google的webp格式?
- uni-app 与 Vue H5 项目通讯
- Gridview][UpdateCommand的写法要点]
- MySQL系列之事务日志Undo log学习笔记
- click 延时解决方案
- Splash抓取javaScript动态渲染页面
- Sentence-Transformer的使用及fine-tune教程
- MySQL系列之事务日志Redo log学习笔记
- jQuery 的基本使用
- uni-app项目改用vue-cli npm运行报错及问题总汇
- 10.3【前端开发】背景图片:如何使用精灵图?