Javascript 在ExtJS应用程序中优化性能

我有一个应用程序需要大量的现场使用。我注意到，添加新字段可能相当昂贵，即使在使用suspend/resumelayouts时也是如此。观察Chrome中的时间线，我可以看到相当多的重新计算样式和面板div的强制布局（似乎每个字段一个）。 下面的代码是我正在做的简单表示

util = {
    createTextField: function(myItemId) {
    return Ext.create('Ext.form.field.Text', {
        fieldLabel: 'Field' + myItemId + ':',
        name: 'field',
        itemId: myItemId,
        autofocus: true,
        enableKeyEvents: true,
        labelAlign: 'left',
        labelWidth: 50,
        labelStyle: 'font-size: 16px;',
        width: 500
    });
}
}


Ext.onReady(function() {

    Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            for(i=0; i<100; i++)
            {
                Ext.suspendLayouts();
                formPanel.add(util.createTextField(i));
                Ext.resumeLayouts(true);
            }
        }
    });

    var formPanel = Ext.create('Ext.form.Panel', {
        frame: true,
        title: 'Form Fields',
        width: 340,
        height: 600,
        bodyPadding: 5,
        autoScroll: true,

        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 90
        }});


    formPanel.render('form-ct'); 

});

util={
createTextField:函数（myItemId）{
返回Ext.create（'Ext.form.field.Text'{
fieldLabel:'字段'+myItemId+'：'，
名称：'字段'，
itemId:myItemId，
自动对焦：对，
enableKeyEvents:true，
labelAlign:'左'，
标签宽度：50，
标签样式：“字体大小：16px；”，
宽度：500
});
}
}
Ext.onReady（函数（）{
Ext.create（'Ext.Button'{
文本：“单击我”，
renderTo:Ext.getBody（），
处理程序：函数（）{
对于（i=0；i从循环外部移动suspendLayout/resumeLayout对开始：

        Ext.suspendLayouts();
        for(i=0; i<100; i++)
        {
            formPanel.add(util.createTextField(i));
        }
        Ext.resumeLayouts(true);

Ext.suspendLayouts（）；
对于（i=0；i而言，方法是触发两个事件，and。您可以改为使用带有组件的数组来添加all-at-one。此外，您可以使用and，但我想这不会有多大作用

util = {
    createTextField: function(myItemId) {
        return Ext.create('Ext.form.field.Text', {
            fieldLabel: 'Field' + myItemId + ':',
            name: 'field' + myItemId // names are unique, we will use this to query components
        });
    }
}

Ext.onReady(function() {
    Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            // array to hold all components
            var components = new Array();

            // optimize the for loop and introduce y
            for(var i = 0, y = 100; i < y; i++)
                components.push(util.createTextField(i));

            // add all components at ones to prevent multiple events fired
            Ext.suspendLayouts();
            formPanel.add(components);
            Ext.resumeLayouts(true);
        }
    });

    var formPanel = Ext.create('Ext.form.Panel', {
        frame: true,
        title: 'Form Fields',
        width: 340,
        height: 600,
        bodyPadding: 5,
        autoScroll: true,

        // use defaultType and defaults to clean the code
        defaultTypes: 'textfield',
        defaults: {
            autofocus: true,
            enableKeyEvents: true, // this is heavy, consider if it is required
            labelAlign: 'left',
            labelWidth: 50,
            labelStyle: 'font-size: 16px;',
            width: 500
        }
    });

    formPanel.render('form-ct'); 
});

util={
createTextField:函数（myItemId）{
返回Ext.create（'Ext.form.field.Text'{
fieldLabel:'字段'+myItemId+'：'，
name:'field'+myItemId//名称是唯一的，我们将使用它来查询组件
});
}
}
Ext.onReady（函数（）{
Ext.create（'Ext.Button'{
文本：“单击我”，
renderTo:Ext.getBody（），
处理程序：函数（）{
//数组以容纳所有组件
var components=新数组（）；
//优化for循环并引入y
对于（变量i=0，y=100；i
哎哟，我的糟糕！谢谢你。我的原始代码中确实有它在循环之外，我只是把这个示例搞砸了。还有其他提示吗？很多。试试谷歌搜索“Ext JS performance”，第一个热门文章是：嗯，你确定数组没有触发事件吗？我仍然看到一堆“安装计时器”和时间线中的“移除计时器”，所有这些都与触发“OneMaded”有关。
util = {
    createTextField: function(myItemId) {
        return Ext.create('Ext.form.field.Text', {
            fieldLabel: 'Field' + myItemId + ':',
            name: 'field' + myItemId // names are unique, we will use this to query components
        });
    }
}

Ext.onReady(function() {
    Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            // array to hold all components
            var components = new Array();

            // optimize the for loop and introduce y
            for(var i = 0, y = 100; i < y; i++)
                components.push(util.createTextField(i));

            // add all components at ones to prevent multiple events fired
            Ext.suspendLayouts();
            formPanel.add(components);
            Ext.resumeLayouts(true);
        }
    });

    var formPanel = Ext.create('Ext.form.Panel', {
        frame: true,
        title: 'Form Fields',
        width: 340,
        height: 600,
        bodyPadding: 5,
        autoScroll: true,

        // use defaultType and defaults to clean the code
        defaultTypes: 'textfield',
        defaults: {
            autofocus: true,
            enableKeyEvents: true, // this is heavy, consider if it is required
            labelAlign: 'left',
            labelWidth: 50,
            labelStyle: 'font-size: 16px;',
            width: 500
        }
    });

    formPanel.render('form-ct'); 
});