Carga lenta de la aplicación AngularJS en IE: agregue la barra de progreso

ACTUALIZACIÓN1: comenzó a usarngProgress, pero sin dar el efecto requerido en IE.
Actualización final: la mejor solución encontrada. Ver la última respuesta a continuación.

La aplicación AngularJS tiene varias pestañas y cada pestaña puede tener hasta 100 campos. Los datos se recuperan de la base de datos utilizando varias llamadas Ajax y se usa un bucle relacionado para inicializar cada uno de los siguientes: reglas de validación, elementos de la lista desplegable y finalmente los valores de campo. En algunos casos, estamos usando la combinación de Javascript y AngularJS para obtener el efecto requerido.

Tenga en cuenta que cargar las Reglas de validación implica modificar la directiva, comong-required yng-max que requerirá usar$compile para activar la regla de validación.

Esta pregunta tiene dos partes:

La aplicación AngularJS tiene un notable efecto de carga lenta en IE. En Chrome Browser, la velocidad de carga es mucho mejor.

¿Cómo podemos solucionar problemas y analizar problemas de carga lenta en IE para identificar la ubicación del problema? ¿Cómo puedo trabajar en herramientas de análisis de rendimiento en IE?

Mientras tanto, pensando en agregar la Barra de progreso para actualizarla después de completar la carga de cada una de las partes de datos mencionadas anteriormente: Reglas de validación, elementos de la lista desplegable y valores de campo.

Implementé el complemento ngProgress en mi proyecto, y funciona bien en Chrome, pero en IE no está dando el efecto requerido. La barra de progreso se mostrará y completará al final de la carga de la página. En IE parece que la barra de progreso no se mostrará inmediatamente al comienzo de la representación de la página. Tenga en cuenta que en mi proyecto estoy usando ampliamente la directiva, y gran cantidad de ellos usan$compile Servicio.

Investigué un poco y me di cuenta de que IE no actualizará la pantalla DOM inmediatamente ... esperará hasta una etapa posterior para actualizar todo de una vez, o al menos así lo entendí. Entonces, el truco aquí es cómo obligar al IE a reflejar los cambios DOM lo antes posible.

Utilicé este enfoque que ayudó a obtener mejores resultados en IE:

app.controller('formMainController', ['$scope', '$timeout', '$interval', 'ngProgressFactory',
                function($scope, $timeout, $interval, $q, ngDialog, ngProgressFactory) {
    $scope.progressbar = ngProgressFactory.createInstance();
    $scope.progressbar.start();
    $scope.stopProgressbar = $interval(function(){
        $scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
    },10);
       ...
       ...
       //After getting all data from DB
    $scope.mainPromise.then(function(success) {
        $interval.cancel($scope.stopProgressbar);
        $timeout(function(){
            $scope.progressbar.complete();
        }, 3000);
        return 'main promise done';
    })
}]);

Con lo anterior, en IE, puedo ver que la barra de progreso se muestra mucho antes que antes, luego avanzará en 2 pasos, luego se congelará durante aproximadamente 2 segundos y luego continuará normalmente. Cuando miro la ventana de la consola, puedo ver que se congelará mientras se ejecutan las otras directivas, especialmente la que usa$compile servicio conpriority: 100 yterminal: true, .

¿Alguna idea de cómo mejorarlo?

Nota:Este hilo tiene un problema similar, pero no encontré una solución relevante.

Tarek

Respuestas a la pregunta(5)

Su respuesta a la pregunta