自己写的广告轮播性能太差

Question

这个是我写的网页http://tcstory.github.io/hithinksoftdemo/
下面描述的内容是在打开网页的情况下,并且不进行无关的操作
我用firefox37打开我写的网页,cpu占有率,基本上在40%以上,仿写的网站www.hithinksoft.comcpu占有率才20%左右,
如果用chrome42打开我写的网页,cpu占有率会飙升到80%左右,但是仿写的网站才15%左右性能瓶颈到底在哪里呢?
补上广告轮播的关键代码:
//-----设置slides的轮播-----
objMap.$slide_items.on('movestart',function(event){
$(event.target).fadeIn(configMap.interval_time,function(){
$(event.target).trigger('moveend');
});
});
objMap.$slide_items.on('moveend',function(event){
if(stateMap.bool_continue){
$(this).fadeOut(configMap.interval_time,function(){
var_temp=objMap.slide_items.shift();
objMap.slide_items.push(_temp);
$(objMap.slide_items[0]).trigger('movestart');
});
}
});
//-----END-----
我试过把fadeIn和fadeOut换成animate,但是还是没有多大差别我之所以用事件来处理轮播,就是觉得使用事件更能清晰的表达我的想法,虽然可以通过处理数组下标的方式来完成类似的功能,但是我觉得这样会使代码的可读性不是很好

Answer 1

我觉得首先你要定位到底是哪些功能，哪些代码占用cpu最大。如果你定位是广告轮播的占用问题的话，你就可以仔细分析下这块代码。占用cpu高大概有几种可能，循环太快，计算复杂度。你给出的代码，我看两个事件处理会导致一个死循环，start触发处理里面又触发了end，end事件处理里面有触发了start事件，会形成一个死循环。如果你需要这样的死循环，那么你看能否在触发是sleep下，控制下频率试试。我不知道我的分析对不，希望能对你有所帮助。