博客网页导致电脑CPU飙升的问题解决记录

已经有好几个访客朋友匿名反馈只要打开我的博客电脑的 CPU 就狂转:

因为忙一直也没当一回事,一是我自己的 MacbookAir 打开并没有异常,二是因为我近期都没进行过折腾改造,不应该有问题才对。

直到今天空下来才想到这个问题还没去验证一番,于是让几个朋友试了下,都反馈确实有问题!Windows 下 CPU 狂转,MAC 下风扇呼呼响(奇怪的是我的 MAC 没问题),看来确实有必要解决下了。

我对于网页导致 CPU 飙升,也没听过说过有什么解决套路,问了几个前端朋友也说不好定位(有知道的朋友可以留言分享下),只能骑驴找马试试看了。

首先,我看了下是否因为的 CSS 大括号写成全角带来的问题,结果并未发现异常【相关文章】;

然后,在火狐、谷歌查看了下开发者模式,发现也没有明显报错,又陷入了僵局;

2017-11-12 补充:上次排查认为是防镜像代码出现死循环导致 CPU 爆卡,于是对代码做了下规避,结果还是有朋友在文章下面留言说爆卡!说风扇呼呼响,CPU 100%,有点诡异!主要是我的 Mac Book Air 并没有出现风扇呼呼响的情况,以为好了。于是开着博客网页看了下 top 命令,结果发现 CPU100%++,看来依然没解决!尼玛。。。

实在没辙,于是打开了使用了相同主题的知更鸟博客试了下, 发现也是 100%++,看来是通病。于是顺着看了几个用知更鸟主题的网站,发现有部分又是没问题的。。。

于是从外观上看了下差异,一眼就看到了 Logo 扫光特效!!!一闪一闪的很有可能是真凶了!于是看了下没问题的博客,发现都没开这个特效,当我把这个特效关了之后,CPU 负载瞬间就陡降了!

所以,造成 CPU 爆卡的原因之一是:知更鸟主题的 Logo 扫光特效!

拓展:这功能本来也没什么 L 用,华而不实,一直忙就忘记关掉了,现在发现居然会导致 CPU 爆卡,试了几个使用了这个特效的网站,也存在同样的问题,大家可以试下。 简单看了下扫光特效的 CSS 代码,主要使用 keyframes 来实现的动画,因此也看了些资料。验证这个特效是否会导致 CPU 上升,可以点击如下网址测试效果: http://www.runoob.com/try/try.php?filename=trycss3_keyframes 反正我点击运行之后,CPU 至少升到 60%+,如果再加快速度,CPU 负载会更高,有兴趣的朋友可以自己测试玩玩。

造成 CPU 负载较高的原因之二是:底部滚动推荐条!

关掉扫光之后,顺便测试了下我博客底部的滚动条,发现也会带来较高的 CPU 负载,如果发现风扇依然呼呼的朋友,可以再关掉滚动条试下。。。但是,这个功能我就不去掉了,总要有所取舍。

造成 CPU 负载较高的原因之三是:防镜像代码中存在死循环。

三个问题全部规避试了下,使用 QQ 浏览器时,CPU 负载依然在 50%左右,使用谷歌基本只有 20%以下,估计和浏览器内核版本也有所关系,暂时找不出问题了,以后再看看吧!

下面是之前排查过程,无关紧要。展开

按照我个人经验,这种导致 CPU 爆卡的肯定是有什么死循环之类的 js 定时任务导致的。于是按下 F12 瞄了下有没有异常代码,结果一眼就瞄到了很久之前加入的防止镜像的 img+js 代码【相关文章】:

几乎本能的确定就是这个代码导致的,这段代码的防镜像原理是指定 img 为错误的 src 地址,然后触发 onerror 错误事件来进行域名判断的,这个过程应该是个死循环,也就是不断的产生 onerror 事件和域名判断,从而带来了 CPU 飙升问题。

于是注释了这段代码,让朋友试下,结果一切恢复正常了,果然这就是真凶!

目前没时间研究这段代码的兼容性问题,只好先注释了。理论上应该只需要给这个事件逻辑加上一个延时机制,比如延时个 1s 以上,应该就可以解决了,也就是和 while true 不加 sleep 一样的道理!感兴趣的同学可以去研究研究。

好了,这个问题就记录到这,用到这段代码的朋友也可以看看是否存在相同的问题。


20171021 补充:博友【时光在路上】已经留言告知解决 onerror 事件导致死循环的方法,感谢!

解释如下:

当图片加载失败的时候,我们可以利用 onerror 事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环。 为了避免死循环的情况,我们可以在执行完 onerror 事件后,置于 onerror=null 来清除 onerror 事件,参考代码如下: <img src="http://127.0.0.1:8088/images/avatar_50x50.gif" onerror="this.onerror=null;this.src='http://127.0.0.1:8088/images/noavatar_small.gif'" /> 原文地址:http://www.cnblogs.com/52php/p/5677847.html

果然,还是和我猜的那样存在死循环问题,本来想着循环判断也挺好的,所以只需要加一个延时,应该就可以解决高负载的问题。不过 onerror 既然可以清空,那我还是使用清空方案吧!

修改后的防镜像代码如下:

<img style="display:none" src=" " onerror='this.onerror=null;var currentDomain="zhang" + "ge." + "net"; var str1=currentDomain; str2="docu"+"ment.loca"+"tion.host"; str3=eval(str2) ;if( str1!=str3 ){ do_action = "loca" + "tion." + "href = loca" + "tion.href" + ".rep" + "lace(docu" +"ment"+".loca"+"tion.ho"+"st," + "currentDomain" + ")"; eval(do_action) }'/>

原代码中新增 this.onerror=null;来置空 onerror 事件即可。

看来还是认知不够用,只想到了死循环可以加延时来解决,却忘记了搜索引擎找下【onerror 死循环】相关问题解决方法,失策失策。

无聊继续看了下, 发现我前面想的延时方案也已经有前人分享过了,这里继续拓展延伸一下:

img 加载图片偶尔会出错,利用 onerror 可以加载一个缺省图片,也可以重载同一张图片。 但是都要考虑,重载的图片仍然错误,就会陷入死循环。 下面给出一个带重试次数,并且延迟加载的实现,超过重试次数仍不能正常显示的,显示缺省图片。 <html>   <head>   <script>   /**   * 图片出错处理,可以重加载指定的图片。超过重试次数仍不能正常显示的,显示缺省图片。   * 示例<img onerror="showImgDelay(this,'1.jpg',2)" src="1.jpg">   *   * imgObj:img节点对象   * imgSrc:出错时加载的图片地址   * maxErrorNum:最大出错次数,防止出现死循环   */   function showImgDelay(imgObj,imgSrc,maxErrorNum){       showSpan.innerHTML += "--" + maxErrorNum;       if(maxErrorNum>0){           imgObj.onerror=function(){               showImgDelay(imgObj,imgSrc,maxErrorNum-1);           };           setTimeout(function(){               imgObj.src=imgSrc;           },500);       }else{           imgObj.onerror=null;           imgObj.src="images/default.jpg";       }   } </script>   </head>   <body>   <img onerror="showImgDelay(this,'1a.jpg',2);" src="1a.jpg" width="200" height="200"/>   <span id="showSpan"></span>   </body>   </html> 原文地址:http://www.iteye.com/topic/1118362

当然,防镜像那个代码就没必要弄这么复杂了,本文就记录这么多,有兴趣的自己去折腾吧。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PHP在线

8个最佳PHP库

原文出处: codegeekz 译文出处:oschina PHP标准库 (SPL)的目的就是提供一组接口,让开发者在PHP5中充分利用面向对象编程。因此...

50140
来自专栏肖洒的博客

【python】【Djang】GPS/北斗串口数据实时定位百度地图

本项目为从串口读取GPS/北斗设备接收数据,进行处理后使用百度地图api实时显示定位。

1.2K20
来自专栏帘卷西风的专栏

关于cocos2dx3.2返回键问题以及ansi转utf8的问题

10430
来自专栏张戈的专栏

实测Nginx服务器开启pagespeed加速效果

上周有一个站长问到我一个问题,问 fastcgi_cache 和 pagespeed 加速有没有冲突。略微想了下,2 个都是比较原生的主,应该不存在兼容问题。 ...

65690
来自专栏Material Design组件

Human Interface Guidelines — Custom Keyboards

15030
来自专栏九彩拼盘的叨叨叨

关于成为一只体面的前端攻城狮

怎样算是个体面的前端攻城狮? 大概是,PM,设计,开发等工种都觉得你很专业,很腻害吧~

11440
来自专栏Android机动车

我的第一个RN项目——趣闻

之前利用自己的业余时间入门了微信小程序,并写了一个入门项目 我的第一个微信小程序-趣闻 ,整体效果和之前写的 kotlin-android 版的 趣闻 模块和功...

7210
来自专栏腾讯Bugly的专栏

【Dev Club分享】iOS黑客技术大揭秘

Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享,话题讨论等活动。 本期,我们邀请了腾...

40860
来自专栏更流畅、简洁的软件开发方式

分页解决方案 之 QuickPager的使用方法(目录)

      QuickPager asp.net 2.0 分页控件,基本告一段落。现在把使用方法、源码、Demo公布一下,感兴趣的可以下载看看。 一、从提取数...

21290
来自专栏张戈的专栏

移动搜索SEO分享:PHP自动生成百度开放适配及360移动适配专用的Sitemap文件

导读 随着智能手机的高速普及,人们将更多时间放到了手机上,麻利的做着以前只能在电脑上才能完成的购物、聊天、信息获取等事情。如此一来,站长们对移动端的 SEO 也...

47660

扫码关注云+社区

领取腾讯云代金券