1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Turkey
    Posts
    2
    Vote Rating
    0
    sourvil is an unknown quantity at this point

      0  

    Default Startup Performance Problem

    Startup Performance Problem


    Dear All,

    We have developed a Sencha Touch 2.0 & PhoneGap 2.0/1.Total size is 8-9 mb. 38-40 views exist on the project.
    We have the startup time performance problem, we have to reduce this time.

    We have read lots of articles about this issue. (Gzip Compression, using Sencha-All.js instead of Sencha-All.Debug.js, headjs.com solution, dynamic loading etc..) But no way. It takes 15-16 seconds to see the initial time.

    So, after that, we decided to create a second html (Login.Html with only necessary files) and while the user performs the login operation, we have cached the other .js files asynchronously in the background.
    After the Login operation, we redirect the Login.html to the MainPage.html (index.html). Login.html takes 4-5 seconds (it is acceptable) but the MainPage.html takes 9 seconds (it is unacceptable) to load although we cache the necessary .js and other files.

    Maybe Dynamic loading may be the solution but we could not find a proper example for this usage.

    Is there anyway to give a try?
    (I can share our application web url with you to see the details with Chrome Profiler)

    Best Regards.

  2. #2
    Sencha User
    Join Date
    May 2012
    Location
    Turkey
    Posts
    2
    Vote Rating
    0
    sourvil is an unknown quantity at this point

      0  

    Default


    No comment/help Dear Support Team?

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default I had the same problem....

    I had the same problem....


    Are you using the sencha command so that it analyses your app and only packages the classes that you actually use in your app?

    If I remember (I need to check I think I did it a while back) I had a similar problem where my app initially took some time.i ran the sencha command on it and it shaved about half off my initial loading time. This is before I have minimised and compressewd everything...

    :-)

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    15
    Vote Rating
    1
    raye is on a distinguished road

      0  

    Default


    I think you may try to minify the project with the build package process before you embed with PhoneGap (if you haven't).

    I found the cache mechanism is not working (in my situation) and package is acceptable (but far away from ideal).

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Istanbul, Turkiye
    Posts
    16
    Vote Rating
    0
    LostMan is on a distinguished road

      0  

    Default


    You can slice the views. For Example if you have login screen, in app.js only add items for login screen required js. When you click login screen load dynamiclly controller, model, store, view what you need to show other screen.


    ingilizcem anlaşıldığı gibi kötü, şöyle söyleyim; aynı sorun bende de vardı. Uygulamayı parçaladım. app.js içerisinde sadece ilk ekranı açmak için gerekli olan js leri ekledim. Böylece uygulama 2 veya 3 sn de görünür hale geliyor. Daha sonra loginden giriş yaptığımda diyelim ki anasayfa ekranına gidicem, o zaman ana sayfa ekranı için gerekli olan controller,model,store ve view ları dinamik olarak yüklüyorum uygulamaya. Belki ilk geçişte 2 3 sn bekletecek ama bir kere açtığın zaman ilgili ekranı bir daha bekleme yapmıyor.



    //Put this code inside app.js at the end of the app.js.
    Code:
    var loadedDynamically = [];
    //Dinamik Yükleme Methodları
    Ext.app.Application.prototype.addControllers = function (classPaths, config) {
        var self = this,
            config = config || {};
        if (classPaths.length == 0) {
            if (config) { config.call() };
            return;
        }
        var nClassPaths = []
        Ext.each(classPaths, function (classPath) {
            nClassPaths.push('MyApp.controller.' + classPath);
        });
        classPaths = nClassPaths;
     
        Ext.require(classPaths, function () {
            var controllers = self.getControllerInstances();
            Ext.each(classPaths, function (classPath) {
                if (!controllers[classPath]) {
                    var controller = Ext.create(classPath, Ext.apply({
                        application: self
                    }, config.options || {}));
                    controllers[classPath] = controller;
                    self.controllers.push(classPath);
                    controller.init();
                }
            });
            if (config) { config.call() };
        });
    };
    Ext.app.Application.prototype.addStores = function (classPaths, config) {
        if (classPaths.length == 0) {
            if (config) { config.call() };
            return;
        }
        Ext.each(classPaths, function (classPath) {
            classPath = 'MyApp.store.' + classPath;
            classPath = classPath.replaceAll('\\.', '/').replaceAll('MyApp', 'app');
            var path = classPath.split('/');
            var storename = path[path.length - 1];
            if (!Ext.getStore(storename)) {
                try {
                    var xmlHttp = null;
     
                    xmlHttp = new XMLHttpRequest();
                    xmlHttp.open("GET", classPath + '.js', false);
                    xmlHttp.send(null);
                    var str = xmlHttp.responseText;
                    xmlHttp = null
                    str = str.replace('define', 'create');
                    eval(str);
                }
                catch (e) {
                }
            }
        });
        if (config) { config.call() };
    };
    Ext.app.Application.prototype.addModels = function (classPaths, config) {
        if (classPaths.length == 0) {
            if (config) { config.call() };
            return;
        }
        var nClassPaths = []
        Ext.each(classPaths, function (classPath) {
            nClassPaths.push('MyApp.model.' + classPath);
        });
        classPaths = nClassPaths;
     
        Ext.require(
                classPaths
            , function () {
                if (config) { config.call() };
            });
    };
    Ext.app.Application.prototype.addViews = function (classPaths, config) {
        if (classPaths.length == 0) {
            if (config) { config.call() };
            return;
        }
        var nClassPaths = []
        Ext.each(classPaths, function (classPath) {
            nClassPaths.push('MyApp.view.' + classPath);
        });
        classPaths = nClassPaths;
     
        Ext.require(
            classPaths
        , function () {
            if (config) { config.call() };
        });
    };

    //Bu kod kısmını global bir js kısmına ekle
    Code:
    //viewName, openModule, callback function, isMain, record, beforeCallbackFn, callbackFnArgs,beforeCallbackFnArgs
    function loadDynamically(me, viewName, callbackFn, callbackFnArgs, beforeCallbackFn, beforeCallbackFnArgs) {
        var app = me.getApplication();
     
        function loadDynamicallyTemplate(controllers, models, stores, views) {
            if (loadedDynamically.indexOf(viewName) == -1) {
                app.addControllers(controllers, function () {
                    app.addModels(models, function () {
                        app.addStores(stores, function () {
                            app.addViews(views, function () {
                                //Daha açılmış ise o view bir daha yükleme
                                loadedDynamically.push(viewName);
     
                                //view açılmadan önce yapılması istenilenler
                                if (beforeCallbackFn)
                                    beforeCallbackFn.apply(this, beforeCallbackFnArgs);
     
                                Ext.Viewport.removeAll(true, true);
                                Ext.Viewport.setActiveItem({ xtype: viewName });
     
                                //view açıldıktan sonra yapılması istenilenler
                                if (callbackFn)
                                    callbackFn.apply(this, callbackFnArgs);
                            });
                        });
                    });
                });
            }
            else {
                //zaten yüklenmiş ise            
     
                //view açılmadan önce yapılması istenilenler
                if (beforeCallbackFn)
                    beforeCallbackFn.apply(this, beforeCallbackFnArgs);
     
                Ext.Viewport.removeAll(true, true);
                Ext.Viewport.setActiveItem({ xtype: viewName });
     
                //view açıldıktan sonra yapılması istenilenler
                if (callbackFn)
                    callbackFn.apply(this, callbackFnArgs);
            }
        }
        //Gelen View adına göre sisteme gerekli olanları yükleme
        switch (viewName) {
            case 'vwAnaSayfa':
                loadDynamicallyTemplate([
                    'cntAnaSayfa',
                ],
                [
                    'mdlAnaSayfa',
                ],
                [
                    'strAnaSayfa',
                ],
                [
                    'vwAnaSayfa',
                ]);
                break;
            default:
                console.log('Dikkat Dinmik View Ekle Bulunamadı...');
                break;
        }
    }

    //Kullanımı
    Code:
    Ext.define('MyApp.controller.cntLogin', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                btnLogin: '#btnLogin'
            },
            control: {
                btnLogin: {
                    tap: function () {
                        //basit yolu
                        //viewName, openModule, callback function, isMain, record, beforeCallbackFn, callbackFnArgs,beforeCallbackFnArgs
                        loadDynamically(this,'vwAnaSayfa',null,null,null,null);
     
                        var test=1;
                        var test2=2;
                        //callback lazım ise
                        //viewName, openModule, callback function, isMain, record, beforeCallbackFn, callbackFnArgs,beforeCallbackFnArgs
                        loadDynamically(this,'vwAnaSayfa',function(test){
                            //before opening view callback
                            console.log(test)
                        },[test],function(test2){
                            //after view opened callback
                            console.log(test2)                        
                        },[test2])
                    }
                }
            }
        }
    });

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    12
    Vote Rating
    0
    tine_m is on a distinguished road

      0  

    Default


    I have about 52 views on web app that loads in about 5s on phone without HTML5 cache. I can give you few tips:
    • when navigating the app try to load every view dynamically and destroy views that you don't need and also you could clear the stores behind.
    • build the app with sencha command (so it minifies css and js)
    • make as few request as possible (single css file, as few as posssible js files, inline (small!)images in css)
    • use dynamic loader