所以我決定使用一個簡單的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使用率如此之高?我如何讓它變得更好?
我會在這裏選擇'.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