PDA

View Full Version : Startup Performance Problem



sourvil
16 Oct 2012, 11:57 PM
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.

sourvil
18 Oct 2012, 12:00 AM
No comment/help Dear Support Team?

digeridoopoo
18 Oct 2012, 11:44 AM
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...

:-)

raye
29 Oct 2012, 10:58 PM
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).

LostMan
8 Nov 2012, 12:09 AM
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.


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


//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ı


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])
}
}
}
}
});

tine_m
8 Nov 2012, 3:57 AM
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