大佬教程收集整理的这篇文章主要介绍了简单的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使用率如此之高?我该如何做得更好?
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,.5),0px 1px 0px rgba(250,250,.2); Box-shadow: inset 0px 2px 2px rgba(0,.2); -webkit-transition: BACkground-color 350ms; -moz-transition: BACkground-color 350ms; transition: BACkground-color 350ms; } .slogan span { font-family: Tahoma,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,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,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幻灯片导致高CPU使用率全部内容,希望文章能够帮你解决简单的jquery幻灯片导致高CPU使用率所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。