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

Question

这个是我写的网页http://tcstory.github.io/hithinksoftdemo/

下面描述的内容是在打开网页的情况下,并且不进行无关的操作

我用firefox 37打开我写的网页,cpu占有率,基本上在40%以上,仿写的网站www.hithinksoft.com cpu占有率才20%左右,
如果用chrome 42打开我写的网页,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下，控制下频率试试。
我不知道我的分析对不，希望能对你有所帮助。

Answer 2

你要知道js遍历DOM的操作是非常耗性能的，用jQuery的话工作量就更大了，没多少功能，能用原生js就尽量用原生js吧，载入速度也快，附上我写的你看看吧https://github.com/hawx1993/banner

Answer 3

如果只考虑 webkit 的话，建议使用css3 transform 来作过渡动画呢。 cpu 一般10不到。