ExtJS由于UI设计过去强悍,导致性能问题一直被大家诟病,不过到ExtJS4.1之后,性能问题相比以前的版本已有所改善,下面是官方文档给出的优化建议,李坏在此做个小小的总结,仅供大家参考。

(1)合理设置监听事件

      事件监听是我们在性能优化时需要非常注意的一个部分。比如:数据集store的load事件,正常情况下,我们只需要在第一次加载数据的时候发起请求、获取数据;但是,如果我们监听设置不合理,可能会导致,当我们每次查看该页面的时候,都会触发load事件,加载同样的数据,如果数据量特别大,无疑给我们的性能带来很大的影响。为了解决这个问题,我们可以为该监听事件添加single:true配置项,代码如下:

listeners: {
    load: onFirstLoadData,
    single: true
}

      另一个需要我们注意的事件是afterrender,这个事件在所有的DOM节点加载完毕后被触发。每当我们对页面中的元素做任何修改,都会触发该事件、重新渲染页面,这样必然影响我们应用的加载速度。未解决这个问题我们可以用beforerender代替,在ExtJS4.1版本以后我们也可以使用boxready代替该事件,具体使用方法请参考官方文档。

(2)杜绝doLayout和doComponentLayout的调用

      从字面即可看出,这两个方法都是对页面重新进行布局,对整个应用的页面重新计算布局,其付出的性能代价是非常昂贵的,好在ExtJS4.1开始,我们基本可以不再使用这两个方法,这里提出,只是给新手童鞋们一个提醒,李坏在此不再做详细阐述。

(3)减少容器嵌套

      简而言之,能用一层嵌套实现的绝不用两层嵌套,能用两层嵌套实现的绝不用三层嵌套… …因为每一层容器的初始化、渲染和加载都是需要大量时间的,所有我们应该在保证功能完整的基础上尽可能减少容器嵌套。例如:

{
    id: 'container1',
    items: [{
        id: 'container2',
        items: [{
            id: 'component3'
        }]
    }]

      我们完全可以用下面的布局替代:

{
    id: 'container1',
    items: [{
        id: 'component3'
    }]
}

(4)用container替代panel

      当我们仅仅需要一个容器的时候,完全可以使用container替代panel(默认容器为panel),因为container是panel的基类,panel在功能上要比container强大的多,当然渲染一个panel消耗的性能也比container多很多,所以,如果可以,我们应该尽量使用container替代默认的panel。

{
    xtype: 'container', // 默认容器类型 'panel'
    items: [ ... ]
}

(5)减少border布局嵌套

      每添加一层border布局嵌套,就要增加一次布局初始化、渲染和加载的时间,在ExtJS4.1以前的版本,同一个页面的布局中如果需要两个North区域,需要嵌套两层border布局,在ExtJS4.1中,这种恶心的布局方式已经一去不复返了,不管想要实现什么样的布局结构,一个border布局已完全可以实现了。

(6)减少对DOM的读、写操作

      ExtJS官方在开发4.1版本时 ,已经尽可能减少布局时对DOM节点的读写操作,因为对DOM节点的操作会降低应用的速度,尤其是写操作,对性能的开销还是相当大的,所以我们在开发应用时,也应该尽可能减少这样的操作。比如,对节点样式的修改我们尽可能使用beforrender事件,在页面渲染前实现,而不是渲染后。

      以上是ExtJS官方文档给出的几条优化建议,李坏认为,这些注意事项应该是我们在开发过程中就应该注意的,而不是开发完成后重新做优化,否则,带来的工作量是相当巨大的,李坏曾在此付出过惨重代价,在此提醒大家,希望对各位有所帮助!

【技术交流,欢迎大家拍砖】

  1. cleanidea 说道:

    多谢分享,以后会常来学习。