Carregamento lento do aplicativo AngularJS no IE - adicionar barra de progresso

UPDATE1: começou a usarngProgress, mas não dando o efeito necessário no IE.
Atualização final: melhor solução encontrada. Veja a última resposta abaixo.

O aplicativo AngularJS possui várias guias e cada guia pode ter até 100 campos. Os dados são recuperados do banco de dados usando várias chamadas Ajax e um loop relacionado é usado para inicializar cada um dos seguintes itens: regras de validação, itens da lista suspensa e, finalmente, os valores do campo. Em alguns casos, estamos usando a combinação de Javascript e AngularJS para obter o efeito necessário.

Lembre-se de que o carregamento das Regras de validação envolve a modificação da diretiva, comong-required eng-max o que exigirá o uso$compile para ativar a regra de validação.

Esta pergunta tem duas partes:

O AngularJS App tem um efeito de carregamento lento perceptível no IE. No navegador Chrome, a velocidade de carregamento é muito melhor.

Como podemos solucionar e analisar problemas de carregamento lento no IE para identificar o local do problema? Como posso trabalhar em ferramentas de análise de desempenho no IE?

Enquanto isso, pensando em adicionar a Barra de progresso a ser atualizada após concluir o carregamento de cada uma das partes de dados mencionadas acima: Regras de validação, itens da lista suspensa e valores de campo.

Eu implementei o plugin ngProgress no meu projeto e funciona bem no Chrome, mas no IE não está dando o efeito necessário. A barra de progresso será exibida e concluída no final do carregamento da página. Parece no IE que a barra de progresso não será exibida imediatamente no início da renderização da página. Lembre-se de que, no meu projeto, estou usando diretivas extensivamente, e grande número delas usa$compile serviço.

Eu fiz algumas pesquisas e percebi que o IE não atualiza a exibição do DOM imediatamente ... esperará até um estágio posterior para atualizar tudo de uma vez, ou pelo menos esse foi o meu entendimento. Portanto, o truque aqui é como forçar o IE a refletir as alterações do DOM o mais rápido possível.

Eu usei essa abordagem que ajudou a obter melhores resultados no 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';
    })
}]);

Com o exposto acima, no IE, eu posso ver a barra de progresso mostrando muito mais cedo do que antes, depois fará um progresso de 2 etapas, congelará por cerca de 2 segundos e continuará normalmente. Quando observo a janela do console, vejo que ela congelará enquanto as outras diretivas estão sendo executadas, especialmente a que usa$compile serviço compriority: 100 eterminal: true, .

Alguma idéia de como torná-lo melhor?

Nota:Esta discussão tem um problema semelhante, mas não encontrei uma solução relevante.

Tarek

questionAnswers(5)

yourAnswerToTheQuestion