簡單的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使用

回答

相關問題