简单的jquery幻灯片导致高CPU使用

所以我决定使用一个简单的1行jQuery内容滑块，而不是选择臃肿的插件。我使用animated.css作为淡入/淡出幻灯片的jQuery文本淡入淡出。简单的jquery幻灯片导致高CPU使用

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托管的位置：http://cloud69.comoj.com/pages/

的问题

此幻灯片会导致我的CPU使用率高达15％到20％。我尝试收集一个CPU配置文件，并定期看到尖峰（可能在幻灯片发生变化时）。

为什么CPU使用率如此之高？我如何让它变得更好？

来源

2014-09-28 Shubham Kanodia

我会在这里选择'.appendTo（）'作为罪魁祸首。 – melancia 2014-09-28 07:48:03

尝试使用'.html（）'来代替它，看看它是否有帮助。 – melancia 2014-09-28 07:51:04

另一个变化是将选择器缓存到一个变量中，所以你不需要每次都选择它：var myItem = $（'＃student-blocks'）'var'myFirstItem = $（'＃student-blocks > div：第一个'）'。围绕这些线路的东西。 – melancia 2014-09-28 07:51:54

首先在你的问题，我怀疑你会通过优化代码发布（20 - 25％，你说是一个非常高的数字！）得到任何有意义的改进！但让我们看看我们能做些什么。代码，你可以使用$('#student-blocks > div:first')以外的区间函数，如：

var el $('#student-blocks > div:first');，并使用el元素变量。好多就是用的这个选择：

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

另外，根据本article **最好的**性能选择应该是：

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

总之，我会更改代码如下：(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>

另一种方法是，以动画的帧速率较低，或进行更改，帮助浏览器渲染引擎（这可能是东西一样多变的款式或DOM）。

替代的解决方案，不带任何PU问题只使用CSS

为了变得更好，我会用只有一个简单的CSS。我做了淡入ffect您例如： http://jsfiddle.net/csdtesting/104cuxxb/

CSS唯一实现：

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; 
 
} 
 
/*================================ 
 
\t 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>

希望你喜欢它，这真的帮助！

来源

2014-09-28 08:08:41

这看起来不错，尽可能只使用CSS是个好主意，但这不是问题的答案。如果其他人有处理器消耗脚本并寻找答案，可能会在这里结束，也许CSS解决方案并非如此。 – melancia 2014-09-28 08:10:05

我提出了另一种解决问题的方法，因为我认为没有cpu问题 – 2014-09-28 08:11:24

“我如何使它变得更好？”到那个问题...... – 2014-09-28 08:11:54

简单的jquery幻灯片导致高CPU使用

回答

相关问题