Site, JS Performance problem

[pokemarine]

Hey, I would like to inform you that the fuwanovel.net main site has some performance issue. First, I just noticed that my browser got slower when I opened the site (25% CPU and it started to eat up all my memory in the process, so got slower and slower by the time) and when I checked what could it be exactly, I found out it was due to the snowflake effect. I blocked the js file with ad-block and now it works like it should.

Maybe it is a common thing and everyone have it, I don't know. I just wanted to tell you this.

 

I checked in Firefox 26.0 and in IE8.

Related JS file: https://fuwanovel.net/assets/js/snow-animation.js

 

Edit:

It is somewhat better with Chrome.

[vzjrz]

Yep I'm experiencing the exact same problem. "Snow" animations bring my firefox to a crawl. It's slightly better in chrome but not by much. I also noticed the same problem when visiting the steam home page: http://store.steampowered.com/

[Nosebleed]

I'm going to guess that Chrome is more optimized for these scripts than Firefox and IE and that's why it's not as noticeable when you use Chrome. For me it doesn't slow down at all though it still eats 25% of my CPU but Chrome itself eats your RAM away so maybe that's why.

Perhaps an option to turn off the snow would help? If that's possible in any way

[pokemarine]

I'm going to guess that Chrome is more optimized for these scripts than Firefox and IE and that's why it's not as noticeable when you use Chrome. For me it doesn't slow down at all though it still eats 25% of my CPU but Chrome itself eats your RAM away so maybe that's why.

Perhaps an option to turn off the snow would help? If that's possible in any way

Yeah, it is possible. I mentioned you can disable the snow with Ad-block (in firefox) for example.

Howto:

right click on page->Ad-block plus block image->Select custom-> paste in this:

https://fuwanovel.net/assets/js/snow-animation.js

Then click "Add filter", refresh page.

[Nosebleed]

Thanks for the tip but it runs smoothly for me so far so I don't need to disable it any time soon.

[ThatPlayer]

Seems to be a bit slow because it's a Javascript animation. Nayleen should try it as a CSS animation it might be faster.

[REtransInternational]

I do not see any delay in that file, so it is just going to try to loop through the flake drawing as fast as possible, which is going to take up all the CPU time it can. Put a sleep in the main loop, 50ms or so is enough to calm things down, no reason why this needs to go as fast as possible.

Seems to be a bit slow because it's a Javascript animation. Nayleen should try it as a CSS animation it might be faster.

CSS tends to be even worse...

[ThatPlayer]

CSS tends to be even worse...

Really? I think CSS can be hardware accelerated. At the very least it did animations better when I was playing around on my Android Tablet than jquery's animate.

 

EDIT:

 

http://css.dzone.com/articles/css3-transitions-vs-jquery

 

http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

 

Random fact checking. Seems to be that CSS transitions are done by the browser while jquery's animate is done in a javascript timer.

 

 

I do not see any delay in that file, so it is just going to try to loop through the flake drawing as fast as possible, which is going to take up all the CPU time it can. Put a sleep in the main loop, 50ms or so is enough to calm things down, no reason why this needs to go as fast as possible.

 

Javascript doesn't have sleeps. Looks like the code is using setInterval which is adding the snowflake every 80 ms. The movement down the screen is done with jQuery animate.

 

http://pastebin.com/YtM0y1aD because it's easier to look at

Edited December 23, 2013 by ThatPlayer

[REtransInternational]

Really? I think CSS can be hardware accelerated. At the very least it did animations better when I was playing around on my Android Tablet than jquery's animate.

Hardware acceleration just means you can run the animation loop faster, and with no framerate limiting it still try to run as fast as it can and consume all CPU + GPU. Google "CSS animation high CPU usage" and you will see... real problem here can be fixed by limiting the framerate.

[ThatPlayer]

Hardware acceleration just means you can run the animation loop faster, and with no framerate limiting it still try to run as fast as it can and consume all CPU + GPU. Google "CSS animation high CPU usage" and you will see... real problem here can be fixed by limiting the framerate.

 

Except it's also the browser that handles the tweening so the browser can handle the framerate limiting and the position. Javascript for example has the a newer requestAnimationFrame method to limit framerate drawing, it is the jQuery animations that run on a short timer. But it is not widely supported last I checked. From that article it seems to have a pretty good blgo post at http://dev.opera.com/articles/view/better-performance-with-requestanimationframe/ .

 

Googleing what you suggested gives a question on everyone's favorite stackoverflow: http://stackoverflow.com/questions/13176746/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way

 

This answer seems to say the cause to be an infinite loop with keyframes. A falling snow effect would only have a beginning and end keyframe. The 8th result or so is http://www.richardet-design.com/design/webdesign/css3-animation-vs-jquery-animation/ which is similar to the stack overflow question. The other results don't seem to be relevant.