Question

我在我的应用程序中使用了一个ticker组件。当文本滚动时，CPU周期达到10+。只要我将光标悬停在它上面，滚动就会停止，CPU周期会降低到0

有人可以判断这是否正常？如果没有，我如何使这个组件使用更少的CPU周期？

以下是自动收报机的代码：

Ext.define('MyApp.ux.Ticker', {
    extend: 'Ext.Component',
    xtype: 'ticker',
    baseCls: 'x-ticker',
    autoEl: {
        tag: 'div',
        cls: 'x-ticker-wrap',
        children: {
            tag: 'div',
            cls: 'x-ticker-body'
        }
    },
    body: null,


    constructor: function (config) {
        Ext.applyIf(config, {
            direction: 'left',
            speed: 10,
            pauseOnHover: true
        });
        if (config.speed < 1) config.speed = 1;
        else if (config.speed > 20) config.speed = 20;


        Ext.applyIf(config, {
            refreshInterval: parseInt(10 / config.speed * 15)
        });
        config.unitIncrement = 1;


        this.callParent([config]);
    },


    afterRender: function () {
        this.body = this.el.first('.x-ticker-body');
        this.body.addCls(this.direction);


        this.taskCfg = {
            interval: this.refreshInterval,
            scope: this
        };


        var posInfo, body = this.body;
        switch (this.direction) {
            case "left":
            case "right":
                posInfo = { left: body.getWidth() };
                this.taskCfg.run = this.scroll.horz;
                break;
            case "up":
            case "down":
                posInfo = { top: body.getHeight() };
                this.taskCfg.run = this.scroll.vert;
                break;
        }
        posInfo.position = 'relative';


        body.setPositioning(posInfo);
        DHT.ux.Ticker.superclass.afterRender.call(this);


        if (this.pauseOnHover) {
            this.el.on('mouseover', this.onMouseOver, this);
            this.el.on('mouseout', this.onMouseOut, this);
            this.el.on('click', this.onMouseClick, this);
        }


        this.task = Ext.apply({}, this.taskCfg);
        Ext.util.TaskManager.start(this.task);
    },


    add: function (o) {
        var dom = Ext.DomHelper.createDom(o);        
        this.body.appendChild(Ext.fly(dom).addCls('x-ticker-item').addCls(this.direction));
    },


    onDestroy: function () {
        if (this.task) {
            Ext.util.TaskManager.stop(this.task);
        }


        DHT.ux.Ticker.superclass.onDestroy.call(this);
    },


    onMouseOver: function () {
        if (this.task) {
            Ext.util.TaskManager.stop(this.task);
            delete this.task;
        }
    },


    onMouseClick: function (e, t, o) {
        var item = Ext.fly(t).up('.x-ticker-item');
        if (item) {
            this.fireEvent('itemclick', item, e, t, o);
        }
    },


    onMouseOut: function () {
        if (!this.task) {
            this.task = Ext.apply({}, this.taskCfg);
            Ext.util.TaskManager.start(this.task);
        }
    },


    scroll: {
        horz: function () {
            var body = this.body;
            var bodyLeft = body.getLeft(true);
            if (this.direction == 'left') {
                var bodyWidth = body.getWidth();
                if (bodyLeft <= -bodyWidth) {
                    bodyLeft = this.el.getWidth(true);
                } else {
                    bodyLeft -= this.unitIncrement;
                }
            } else {
                var elWidth = this.el.getWidth(true);
                if (bodyLeft >= elWidth) {
                    bodyLeft = -body.getWidth(true);
                } else {
                    bodyLeft += this.unitIncrement;
                }
            }
            body.setLeft(bodyLeft);
        },


        vert: function () {
            var body = this.body;
            var bodyTop = body.getTop(true);
            if (this.direction == 'up') {
                var bodyHeight = body.getHeight(true);
                if (bodyTop <= -bodyHeight) {
                    bodyTop = this.el.getHeight(true);
                } else {
                    bodyTop -= this.unitIncrement;
                }
            } else {
                var elHeight = this.el.getHeight(true);
                if (bodyTop >= elHeight) {
                    bodyTop = -body.getHeight(true);
                } else {
                    bodyTop += this.unitIncrement;
                }
            }
            body.setTop(bodyTop);
        }
    }
});

这就是我使用它的方式：

{
                    xtype: 'panel',
                    border: false,
                    height: 40,
                    width: 256,
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [{
                        width: 200,
                        direction: 'left',
                        xtype: 'ticker',
                        itemId: 'rollerPanel'
                    }],
                    listeners: {
                        afterrender: function (panel) {
                            var ticker = panel.down('ticker');
                            ticker.add({
                                tag: 'div',
                                cls: 'title',
                                html: "Ticker content."
                            });
                        }
                    }
                }

上述代码有什么问题？ CPU使用率较高的原因可能是什么？

Answer 1

Chrome开发者工具可以帮助您对此进行分析，但是缓存一些诸如正文和元素的宽度/高度之类的东西也不会有什么坏处，这样您只能在启动时阅读它而不是每次都阅读它剔

ExtJS5：自定义组件（自动收报机）将CPU周期增加10倍

1 个答案: