All geek questions in one place

Simple jquery slideshow leading to high CPU usage

So, I decided to use a simple 1-line jQuery content slider instead of choosing bloated plugins. I use animated.css for text disappearing outside jQuery to fade in / out slides.

HTML:

<section id="student-blocks"> <div> <h2 class="animated fadeUp">News Item #1</h2> <p "animated fadeIn">lorem</p> </div> <div> <h2 class="animated fadeUp">News Item #2</h2> <p "animated fadeIn">lorem</p> </div> <div> <h2 class="animated fadeUp">News Item #3</h2> <p "animated fadeIn">lorem</p> </div> </section>

JQuery

 $(function () { $("#student-blocks > div:gt(0)").hide(); setInterval(function () { $('#student-blocks > div:first') .hide() .next() .fadeIn() .end() .appendTo('#student-blocks'); }, 4000); });

PAGE HERE HERE: http://cloud69.comoj.com/pages/

Problem

This slide show causes my CPU usage to increase to 15-20%. I tried to assemble the processor profile and saw peaks at regular intervals (possibly when the slides change).

Why is the processor load so high? How can I do it better?

+5
source share
1 answer

Firstly, to your question, I doubt that you will get any significant improvements by optimizing the entered code (20-25% you said that it was a very prime number!). BUT let us see what we can do. So, in your code, you use $('#student-blocks > div:first') outside the interval function, for example:

var el $('#student-blocks > div:first'); and use the el element variable. It is much better to use this selector:

 var el = $("#student-blocks").find("div:first");

ALSO, the best selector for ** performance ** according to this article would be:

$("#student-blocks div:first-of-type");

In conclusion, I would modify the code as follows: (http://jsfiddle.net/csdtesting/104cuxxb/)

 var studentsblocks = $("#student-blocks"); var el = studentsblocks.find("div:first-of-type"); $(studentsblocks).find("div:gt(0)").hide(); setInterval(function () { el .hide() .next() .fadeIn() .end() .appendTo(studentsblocks); }, 4000); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="student-blocks"> <div> <h2 class="animated fadeUp">News Item #1</h2> <p "animated fadeIn">lorem</p> </div> <div> <h2 class="animated fadeUp">News Item #2</h2> <p "animated fadeIn">lorem</p> </div> <div> <h2 class="animated fadeUp">News Item #3</h2> <p "animated fadeIn">lorem</p> </div> </section>

Another approach would be to lower the frame rate of your animation or make changes that will help the browser rendering engine (which may be similar to changing styles or dom).

AN ALTERNATIVE DECISION WITHOUT ANY ANY PU PROBLEMS USE ONLY CSS

To make it better, I would use only plain CSS . I made fade-ffect for your example: http://jsfiddle.net/csdtesting/104cuxxb/

CSS only:

 h1, h2, h3 { font-family: Tahoma, Arial, sans-serif; color: #fff; text-shadow: 1px 1px 0px #000000; filter: dropshadow(color=#000000, offx=1, offy=1); } a:hover { color: #0097bc; } .wrapper { width: 500px; margin: 25px auto; } .slogan { width: 500px; height: 90px; margin: 25px auto; overflow: hidden; position: relative; border: 1px solid #000; background-color: #222; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2); box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2); -webkit-transition: background-color 350ms; -moz-transition: background-color 350ms; transition: background-color 350ms; } .slogan span { font-family: Tahoma, Arial, sans-serif; display: inherit; width: 100%; height: 100%; margin: 0; font-size: 75%; line-height: 5px; text-align: center; color: #cccccc; } .slogan p { position: absolute; font-family: Tahoma, Arial, sans-serif; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; color: #fff; text-shadow: 1px 1px 0px #000000; filter: dropshadow(color=#000000, offx=1, offy=1); transform: translateX(100%); -moz-transform: translateX(100%); -webkit-transform: translateX(100%); } .slogan p:nth-child(1) { animation: left-one 20s ease infinite; -moz-animation: left-one 20s ease infinite; -webkit-animation: left-one 20s ease infinite; } .slogan p:nth-child(2) { animation: left-two 20s ease infinite; -moz-animation: left-two 20s ease infinite; -webkit-animation: left-two 20s ease infinite; } .slogan.down p { transform: translateY(-100%); -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); } .slogan.down p:nth-child(1) { animation: down-one 20s ease infinite; -moz-animation: down-one 20s ease infinite; -webkit-animation: down-one 20s ease infinite; } .slogan.down p:nth-child(2) { animation: down-two 20s ease infinite; -moz-animation: down-two 20s ease infinite; -webkit-animation: down-two 20s ease infinite; } /*================================ Move the slogan Downwards ==================================*/ /** Mozilla Firefox Keyframes **/ @-moz-keyframes down-one { 0% { -moz-transform: translateY(-100%); } 10% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(0); } 50% { -moz-transform: translateY(100%); } 100% { -moz-transform: translateY(100%); } } @-moz-keyframes down-two { 0% { -moz-transform: translateY(-100%); } 50% { -moz-transform: translateY(-100%); } 60% { -moz-transform: translateY(0); } 90% { -moz-transform: translateY(0); } 100% { -moz-transform: translateY(100%); } } /** Webkit Keyframes **/ @-webkit-keyframes down-one { 0% { -webkit-transform: translateY(-100%); } 10% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(100%); } 100% { -webkit-transform: translateY(100%); } } @-webkit-keyframes down-two { 0% { -webkit-transform: translateY(-100%); } 50% { -webkit-transform: translateY(-100%); } 60% { -webkit-transform: translateY(0); } 90% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(100%); } } 
 <div class="wrapper"> <h3>Cool fading text only with css .slogan down class</h3> <div class="slogan down"> <p>News Item #1<span>lorem</span> </p> <p>News Item #2<span>lorem</span> </p> <p>News Item #3<span>lorem</span> </p> <p>News Item #4<span>lorem</span> </p> </div> </div>

Hope you enjoy it and it really helps!

+3
source

Source: https://habr.com/ru/post/1203557/

More articles:


All Articles