ExtJs开发模式：MPA和SPA对比

加载时间

从下图中可以看到，MPA模式在第一次加载（58-5=53ms）略慢，要命是有明显的loading..，第二次加载时间正常，说明关闭页面后iframe并没有释放内存。

loadtime.gif

原理与实现

MPA： 多页面应用（Multi-Page Application）。传统的页面开发，通过iframe加载页面。
代码如下：

loadPage: function(title, url, id) {
        var existtab = this.down('uxiframe[frameName="frame_id_' + id + ']');
        if (existtab != null) {
            existtab.show();
        } else {
            var frameUrl = url;
            if (url.indexOf('http://') != -1) {
                frameUrl = url;
            }
            var panel = this.add(Ext.create('Ext.ux.IFrame', {
                title: title,
                frameName: 'frame_id_' + id,
                closable: true
            }));
            this.setActiveTab(panel);
            panel.load(frameUrl);
        }
    }

SPA：单页面应用（Single Page Application）。把页面抽象为模块，通过模块名加载页面。
代码如下：

loadModule: function(title, xtype, id) {
        var existtab = this.down(xtype);
        if (existtab != null) {
            existtab.show();
        } else {
            var panel = this.add({
                title: title,
                xtype: xtype,
                closable: true
            });
            this.setActiveTab(panel);
        }
    }