Website construction

Record of solving the problem of computer CPU soaring caused by blog pages

There have been anonymous feedback from several visitors that as long as I open the CPU of my blog computer, it will go crazy:

Record of solving the problem of computer CPU soaring caused by blog pages

Because I was busy, I didn't take it seriously. First, my Macbook Air didn't turn on abnormally. Second, I didn't have any problems recently.

I didn't think of this problem until today when I was free, so I asked several friends to try it, and they all reported that there was a problem! The CPU is spinning wildly under Windows, and the fan is whistling under MAC (strangely, my MAC is OK). It seems that it is really necessary to solve this problem.

I haven't heard of any solution to the soaring CPU caused by web pages. I asked several front-end friends and said that it was not easy to locate (if you know, you can leave a message to share). I had to try it out.

First, I looked at whether the problem was caused by the writing of full angle CSS braces, but I found no exception【 Related articles 】；

Then, after checking the developer mode in Firefox and Google, we found that there was no obvious error, and we were in a deadlock again;

2017-11-12 Supplement: Last time, it was thought that the anti image code had an endless loop, which caused the CPU to burst, so I evaded the code. As a result, a friend left a message saying that the card was burst at the bottom of the article! It's a bit weird to say that the fan is whistling and the CPU is 100%! The main reason is that my Mac Book Air doesn't have fans whirring, so I think it's good. So I opened the blog page and read the top command. I found CPU 100%++, which still seems to be unsolved! fuck...

I really had no choice, so I opened the robin blog with the same theme and tried it. I found that it was also 100%++, which seems to be a common problem. So I followed several robin themed websites and found that some of them were OK...

So I saw the difference from the appearance and saw the special effect of the logo scanning at a glance!!! Twinkle by flash, it may be the real murderer! So I looked at the blog and found that the special effect was not turned on. When I turned off the special effect, the CPU load suddenly dropped sharply!

Therefore, one of the reasons for CPU card bursting is: Mockingbird themed logo scanning Light special effects!

expand: This function was not used in the first place. It was flashy and impractical. I forgot to turn it off when I was busy. Now I find that it will cause CPU crash. I tried several websites that have used this special effect, but the same problem also exists. You can try it.
I briefly looked at the CSS code of the down scan effect, which mainly uses keyframes to achieve animation, so I also saw some information. To verify whether this special effect will cause the CPU to rise, you can click the following URL to test the effect:
http://www.runoob.com/try/try.php?filename=trycss3_keyframes
Anyway, after I click Run, the CPU will rise to at least 60%+. If I speed up the speed again, the CPU load will be higher. Interested friends can test and play by themselves.

The second reason for high CPU load is: Bottom scroll recommendation bar!

After turning off the scanning light, I tested the scroll bar at the bottom of my blog and found that it would also bring high CPU load. If you find that the fan is still whirring, you can turn off the scroll bar again to try... However, I will not remove this function. I always have to choose between them.

The third reason for high CPU load is: There is an endless loop in the anti image code.

After trying to avoid all three problems, when using QQ browser, the CPU load is still about 50%, and when using Google, it is basically less than 20%. It is estimated that it has something to do with the browser kernel version. I can't find the problem for the time being. Let's see it later!

The following is the previous troubleshooting process, which does not matter.

According to my personal experience, this kind of CPU card burst must be caused by some js timing tasks such as endless cycles. Then press F12 to see if there is any abnormal code. As a result, I can see the img+js code that was added long ago to prevent mirroring【 Related articles 】：

It is almost instinctively determined that this code is the cause. The anti mirroring principle of this code is to specify the img as the wrong src address, and then trigger the oneerror error event to judge the domain name. This process should be an endless loop, that is, the oneerror event and the domain name judgment are constantly generated, resulting in the CPU surge problem.

So I annotated this code and asked my friend to try it, and everything returned to normal. Sure enough, this is the real murderer!

There is no time to study the compatibility of this code, so I have to comment first. Theoretically, only a delay mechanism should be added to the event logic. For example, a delay of more than 1s should be solved, which is the same as while true without sleep! Interested students can go to research.

Well, this problem is recorded here. Friends who use this code can also check whether the same problem exists.

20171021 Supplement : Bo You【 Time is on the way 】We have left a message telling you how to solve the problem of "one error", which leads to an endless loop. Thank you!

The explanation is as follows:

When an image fails to load, we can use the oneerror event to give it a default image. But the problem is that if the default image does not exist, that is, the loading fails, and it will fall into an endless loop.

To avoid an endless loop, we can clear the oneerror event by setting oneerror=null after the oneerror event is executed. The reference code is as follows:

 <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 '" />

Original address: http://www.cnblogs.com/52php/p/5677847.html

Sure enough, as I guess, there is an endless loop problem. It was thought that the loop judgment was also good, so only one delay should be added to solve the problem of high load. But since oneerror can be cleared, I'd better use the clearing scheme!

The modified anti image code is as follows:

 <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. oneerror=null is added in the original code; To empty the oneerror event.

It seems that the cognition is not enough. I only thought that the endless loop can be solved with time delay, but I forgot the search engine to find the solution to the problem related to the "one error endless loop".

I continued to look at the delay scheme I thought about before and found that it has been shared by predecessors. Here we continue to expand it:

IMG occasionally makes errors when loading images. One error can be used to load a default image or reload the same image.

However, we should consider that the overloaded image is still wrong and will fall into an endless loop.

The following shows an implementation with retry times and delayed loading. If it cannot be displayed normally after the retry times, the default image will be displayed.

 <html>   <head>   <script>   /**   *Image error processing, you can reload the specified image. If it cannot be displayed normally even after the number of retries, the default image will be displayed. *Example<img error="showImgDelay (this, '1. jpg', 2)" src="1. jpg"> *   *ImgObj: img node object *ImgSrc: Image address loaded on error *MaxErrorNum: the maximum number of errors to prevent an endless loop */   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>

Original address: http://www.iteye.com/topic/1118362

Of course, there is no need to make the anti image code so complicated. This article only records so much. If you are interested in it, go ahead.

Website pre caching tool to improve the overall loading speed of the website

February 8, 2020

Zhang Ge Blog shares experience and skills of using CloudFlare CDN to accelerate

June 2, 2019

The most simple and practical optimization scheme of static and dynamic separation for small websites

February 3, 2018

Libmemcached Compilation and Installation Error Resolution Record

March 5, 2017

46 responses

Mr. He 2017-10-20 · 16:46

It seems that I'm still crazy here
technical nerd 2017-10-20 · 19:59

I see. It's a pity that I didn't find out, otherwise I would have shameless private talk and harassment evil:
Looking forward to a little memory 2017-10-21 · 11:07

I also added this
Time is on the way 2017-10-21 · 14:12

Here is an article for talent test: http://www.cnblogs.com/52php/p/5677847.html
To avoid an endless loop, we can clear the oneerror event by setting oneerror=null after the oneerror event is executed.
- Jager 2017-10-21 · 15:27
  
  666, that's it.
Long Xiaotian 2017-10-22 · 0:47

Very good. I said how hard the website feels~
Flyer 2017-10-22 · 11:47

Learned
It's worth buying 2017-10-23 · 6:52

I have always trusted the boss, and I am serious in my work. It has been revised. Thank you! Hard work!
Fool's House in the Wild 2017-10-26 · 16:31

Take away the special effects of the comments. Apart from the fancy and speed, it's useless!
Wang Guangwei's Blog 2017-10-27 · 12:35

Collect first, just in case
a tiny tot 2017-10-30 · 15:26

Can you tell me how to get the code block of your article? I'm a rookie. It's really cool.
- Yifeng Blog 2017-11-2 · 0:04
  
  Background plug-in search: Crayon Syntax Highlighter
Interesting Historical Tales 2017-10-31 · 19:28

The owner's website is really beautiful. I'll learn about it
Unrestrained 2017-11-2 · 8:31

I'm scared to death. Hurry to change it
Chu Madman Blog 2017-11-2 · 13:50

Fortunately, you can understand the code yourself. Most people can't handle it
An ordinary citizen 2017-11-3 · 1:03

The third scheme has been adopted, thank you
The moon climbs the stairs 2017-11-4 · 10:25

I can only say that the code is too strong!
The moon climbs the stairs 2017-11-4 · 10:27

I just found that there was a button to turn off the vibration! How awesome! Share!
Interesting Historical Tales 2017-11-6 · 7:31

And this is incredible
Online earning blog 2017-11-6 · 16:44

Worship the Great God
Seon 2017-11-8 · 20:06

But now the fan is still running wildly, and the temperature is soaring very fast, from 43 to 65+in less than a minute. It soared to 75+before you handled it, which led me to close the page after opening your blog for a short time. (TIPS: Now I leave a comment under the high temperature of CPU [color=red] 80 [/color] degrees, MBP 13 2015, the latest version of Chrome.): evil:: evil:
- Jager 2017-11-10 · 23:37
  
  Close it quickly. I'm surprised that my MBA is all right, and you P is still so delicate?
  - Seon 2017-11-10 · 23:53
    
    Now 70 degrees, poopoopoop
chencool 2017-11-10 · 18:42

Thanks for sharing~
BanYuner 2017-11-10 · 22:51

Still in a frenzy~
- Jager 2017-11-10 · 23:36
  
  Then close it quickly
Xiaoqing Blog 2017-11-11 · 6:06

Hello, let me ask you a question. The share button at the bottom of my article page does not work. After clicking it, only a "+" will pop up. The style of the button is the same as yours, because it is built-in to the theme, and I don't know why. I hope I can get your help, thank you!!
Amoy Xiamen 2017-11-20 · 15:51

As soon as you type a comment, the web page keeps shaking. I'm going blind. Ha ha ha ha ha ha ha ha ha ha
Interesting Historical Tales 2017-11-23 · 11:59

I wish I had seen this article earlier. It's really a practical technology
Crazy Mo Blog 2017-11-24 · 11:36

Blogger, how can I leave a message in the input box? I'm shaking the screen when I count a text. It's cool
IHerb Newbie Discount Code 2017-11-28 · 14:09

Learned
Brushless DC water pump 2017-12-4 · 9:32

This vibration makes me dizzy. Fortunately, there is a closed function.
Ape Dream Blog 2017-12-19 · 14:25

I don't know what to comment on because of the shocking special effect
Bajiao Wangzhuan Station 2017-12-24 · 23:18

Why does the light sweeping effect take up so much resources?
Bailian Coupon Mall 2018-4-21 · 11:09

It is not worth the loss to use this code for a logo special effect. A compromise is to create a GIF dynamic diagram with similar effects, which is simple, convenient and does not consume resources
Website construction 2018-5-21 · 17:39

Thanks for sharing
Mixiu Street Information 2018-5-26 · 17:38

I thought it was a mining virus It scared me to death. It was this thing
Baojiang Tianxia 2018-8-16 · 15:55

There is no limit....
lush mountain 2018-12-27 · 11:29

Blogger, will logo scanning still consume CPU
Base team 2019-1-21 · 12:49

I see. Unfortunately, I didn't find it
90 person network 2019-2-16 · 22:49

Is there data being processed all the time? Sometimes it gets stuck
Idiom stories 2019-3-21 · 9:44

Is there too many special effects? I feel the ground shaking when I write a comment
- Jager 2019-3-21 · 10:27
  
  In the comment toolbar, you can choose to close...
Uncle Tu 2019-6-1 · 10:17

Very good wp template
YJLAugus 2019-7-23 · 20:42

Could you please take a look at my specific reasons? Thank you very much The website is my website
Mathier 2020-1-6 · 8:41

After trying the logo scanning effect, my CPU has not increased~it has always been about 30%~I also run three game windows at the same time!