ExtJS动态创建超千个Panel组件的性能问题咨询

问题背景 #

你现在的实现是从服务器获取包含colaboradores的JSON数据，然后为每个数据项创建一个嵌套结构的Panel组件，一次性添加到父容器中。当数据量超过1000条时，Firefox提示页面运行缓慢，想知道这种实现方式是否合理。

你的核心代码如下：

var objChildren=[]; 
responseObj.map((colaborador)=>{ 
  var newColab =Ext.create({ 
    xtype: 'panel', 
    height: 425, 
    margin: 10, 
    width: 350, 
    border: true, 
    bodyBorder: false, 
    bodyCls: 'panelColab', 
    items: [ 
      { 
        xtype: 'panel', 
        items: [ 
          { 
            xtype: 'image', 
            baseCls: 'image-cropper', 
            style:{ 
              backgroundColor:'white', 
              backgroundImage: `url(${colaborador.imageUrl})` 
            } 
          } 
          // 更多嵌套组件
        ] 
      }
    ] 
  }) 
  objChildren.push(newColab); 
}) 
Ext.getCmp('PanelColab').removeAll(); 
Ext.getCmp('PanelColab').add(objChildren);

结论：这种实现方式不合理，原因如下 #

1. DOM节点爆炸：每个Panel本身就是包含多个DOM元素的组件，再加上嵌套的子Panel和Image，1000条数据会生成数万级别的DOM节点。Firefox的Gecko引擎在处理这么多同步DOM创建和渲染时，会占用大量CPU和内存，直接触发“页面运行缓慢”的提示。
2. 组件实例开销：ExtJS的每个组件实例都有独立的生命周期、事件监听和配置对象，1000+实例会占用大量JavaScript堆内存，进一步加重浏览器负担。
3. 同步渲染阻塞：一次性把所有组件添加到父容器，ExtJS会同步触发所有组件的渲染流程，完全阻塞主线程，导致页面在渲染完成前完全无响应。

优化方案（按优先级排序） #

1. 采用**虚拟滚动（Virtual Scrolling）**的组件

ExtJS提供了支持虚拟滚动的组件，比如Ext.view.View（DataView）配合分页插件，核心逻辑是只渲染可视区域内的内容，滚动时复用DOM元素并更新数据，DOM节点数量始终保持在几十到几百的量级，性能提升极其明显。

示例：用DataView实现虚拟滚动的员工卡片列表

// 定义DataView组件
Ext.define('MyApp.view.ColaboradorView', {
    extend: 'Ext.view.View',
    xtype: 'colaboradorview',
    itemTpl: [
        '<div class="panelColab" style="width:350px;height:425px;margin:10px;border:1px solid #ccc;">',
            '<div class="image-cropper" style="background:white;background-image:url({imageUrl});"></div>',
            '<h3>{name}</h3>',
            '<p>{position}</p>',
        '</div>'
    ],
    store: {
        fields: ['imageUrl', 'name', 'position'],
        data: []
    },
    plugins: [{
        ptype: 'listpaging',
        autoPaging: true // 滚动到底部自动加载下一页
    }],
    emptyText: 'No colaboradores found'
});

// 加载数据更新store
Ext.Ajax.request({
    url: 'your-api-url',
    success: function(response) {
        var data = Ext.decode(response.responseText);
        Ext.getCmp('ColaboradorView').getStore().loadData(data);
    }
});

2. 分页加载数据

如果虚拟滚动不适合你的布局，可以改成分页加载：每次只请求20-50条数据，渲染对应组件，提供分页控件让用户切换页码。这样同时存在的组件数量被控制在很小的范围内，浏览器完全可以轻松处理。

3. 简化组件结构

当前的嵌套Panel完全是不必要的开销——你可以用轻量的Ext.container.Container或者直接用HTML模板（比如上面DataView的方式）代替多层Panel，减少组件实例和DOM节点的数量。

4. 异步分批渲染组件

如果必须保留Panel结构，可以分批异步创建和添加组件，给主线程喘息的机会，避免页面完全阻塞。

示例：分批渲染Panel

var batchSize = 50;
var total = responseObj.length;
var currentIndex = 0;

function renderBatch() {
    var endIndex = Math.min(currentIndex + batchSize, total);
    var batch = responseObj.slice(currentIndex, endIndex);
    
    var objChildren = batch.map((colaborador) => {
        return Ext.create({
            xtype: 'panel',
            height: 425,
            margin: 10,
            width: 350,
            border: true,
            bodyBorder: false,
            bodyCls: 'panelColab',
            items: [
                {
                    xtype: 'panel',
                    items: [
                        {
                            xtype: 'image',
                            baseCls: 'image-cropper',
                            style:{
                                backgroundColor:'white',
                                backgroundImage: `url(${colaborador.imageUrl})`
                            }
                        }
                        // 更多嵌套组件
                    ]
                }
            ]
        });
    });
    
    Ext.getCmp('PanelColab').add(objChildren);
    currentIndex = endIndex;
    
    if (currentIndex < total) {
        Ext.defer(renderBatch, 100); // 延迟100ms渲染下一批，给浏览器时间处理UI
    }
}

Ext.getCmp('PanelColab').removeAll();
renderBatch();

内容的提问来源于stack exchange，提问作者Matheus Hatje