Simple jquery slideshow causing High CPU Usage

Question

So I decided to use a simple 1-line jquery content slider instead of opting for bloated plugins. I'm using animated.css for text fade ins apart from the jquery for fading 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 IS HOSTED HERE: http://cloud69.comoj.com/pages/

The Problem

This slideshow causes my CPU usage to shoot up to 15% to 20%. I tried collecting a CPU profile, and saw spikes at regular time intervals (maybe when slides are changing).

Why is the CPU usage so high? How do I make it better?

Answer 1

Firstly at your question I'm doubtful you will get any meaningful improvements by optimizing the code posted (20 -25% you said is a very hign number!).BUT let's see what we can do.So,at your code, you use $('#student-blocks > div:first') outside the interval function like:

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

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

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

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

In conclusion, I would change 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 frame rate of your animation, or make changes that help the browsers rendering engine (which might be stuff like changing styles or the dom).

ALTERNATIVE SOLUTION WITHOUT ANY PU PROBLEM USING ONLY CSS

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

CSS Only Implementation:

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 like it and that realy helps!