所以我决定使用一个简单的 1 行 jquery 内容 slider ,而不是选择臃肿的插件。我正在使用animated.css除了用于淡入/淡出幻灯片的 jquery 之外,还可以用于文本淡入。
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);
});
页面托管于此:http://cloud69.comoj.com/pages/
问题
这张幻灯片导致我的 CPU 使用率飙升至 15% 到 20%。我尝试收集 CPU 配置文件,并以固定的时间间隔看到峰值(可能是在幻灯片更改时)。
为什么CPU使用率这么高?我该如何让它变得更好?
最佳答案
首先,对于你的问题,我怀疑通过优化发布的代码,你是否会获得任何有意义的改进(你说的 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 之类的内容)。
仅使用 CSS 的替代解决方案,不会出现任何 PU 问题
为了让它更好,我会仅使用一个简单的 CSS 。 我为你的例子做了一个淡入淡出效果: 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;
}
/*================================
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>
希望您喜欢它,这确实有帮助!
关于jquery - 简单的 jquery 幻灯片导致 CPU 使用率高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26082644/