Question Comment profiler (déboguer) EventJS EventPipe / Events


Je travaille sur une application ExtJS MVC relativement grande avec environ 40 contrôleurs,> 100 magasins,> 100 modèles, etc. Je ne suis pas le moyen le plus strict de MVC, j'ai donc implémenté une initialisation du contrôleur paresseux qui initialise d'abord le contrôleur quand il est requis et donc les magasins. Je n'inscris également aucune vue dans aucun contrôleur, mais cela ne fait que rendre inutile.

Maintenant, il arrive que les formulaires (ouverts dans une fenêtre Ext.window.Window) prennent environ 1-2 secondes jusqu'à ce qu'ils apparaissent alors que la même forme dans un projet plutôt petit apparaît immédiatement. Donc la forme (mise en page) ne peut pas être le problème ici ce qui m'a amené aux événements. Mais je ne sais pas vraiment comment ce serait le meilleur moyen ou existe-t-il déjà un bon tutoriel? Je suppose que ce serait bien de profiler ceci, pour voir combien de temps prend le tuyau entier (pas seulement le EventPipe lui-même).

Structure de l'événement:

La plupart des événements sont enregistrés via control() du contrôleur responsable. Tous les autres événements sont au plus enregistrés avec { single: true }. Les fenêtres sont fermées et réaménagées lorsqu'elles sont réutilisées.


10
2017-09-14 09:12


origine


Réponses:


J'ai bien peur, mais ExtJS ne fournit aucun profilage d'événement. Il utilise un système d'événements personnalisé.

Voici comment je vois la solution de ce problème.

Il y a Ext.util.Event classe qui fournit des fonctionnalités pour distribuer et gérer tout événement utilisé dans le cadre et Ext.app.EventBus qui fournissent un point unique pour distribuer tous les événements du framework (fireEvent est juste un wrapper pour la méthode Ext.app.EventBus.dispatch).

Les classes sont privées, je recommande donc de voir son code source.

Vous pouvez remplacer ces classes pour voir combien il vous faut d'appeler la méthode Ext.app.EventBus.dispatch et d'appeler le programme d'écoute d'événement dans la méthode Ext.util.Event.fire comme ça (EventProfiler est censé être votre propre classe)

Ext.app.EventBus

dispatch: function (/* event name or Ext.util.Event */event, /* Target class */ target, args) {
    //start timing
    var start = new Date();

    /* ... */

    for (i = 0, ln = events.length; i < ln; i++) {
        event = events[i];
        // Fire the event!
        if (event.fire.apply(event, Array.prototype.slice.call(args, 1)) === false) {
            return false;
        }
        // start event profiling
        // here we are sure that event is dispatched and it's instance of Ext.util.Event
        EventProfiler.startProfile(event, /* time passed from dispath method started */new Date() - start);
    }

    /* rest of dispatch method call */
}

Ext.util.Event

fire: function () {
    /* ... */
    if (listener.o) {
        args.push(listener.o);
    }

    EventProfiler.endProfile(this);

    if (listener && listener.fireFn.apply(listener.scope || me.observable, args) === false) {
        return (me.firing = false);
    }

    /* ... */       

}

6
2017-09-15 10:16