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