Recientemente tuve la oportunidad de crear una nueva aplicación web y pensé en probar Angular para comprenderlo mejor. Así que si yo soybastante nuevo a este marco.

Después de comprender los matices del marco, me resultó sorprendentemente fácil trabajar con él. Todo lo relacionado con mi experiencia había sido fantástico, hasta que los usuarios comenzaron a informar sobre el rendimiento extremadamente lento de la aplicación.

La aplicación es bastante simple, tiene 2 pantallas. Una que muestra una lista de ofertas, y otra donde los usuarios pueden agregar / editar información de ofertas; esta segunda página es un formulario simple que espera que el usuario ingrese información relacionada con las ofertas. Se parece a esto:

Las secciones resumidas se renderizan utilizandong-repeat. La lista de minoristas tiene unas 530 entradas, mientras que la lista de marcas tiene aproximadamente 400 entradas.

Después de un poco de perfil, me di cuenta de que visitar esta segunda pantalla de formulario seguiría aumentando el consumo de memoria del navegador. La primera pantalla no tiene tal efecto. Simplemente cambié entre la primera pantalla y esta segunda pantalla de formulario, y encontré que cada vez que esta pantalla se cargaría, el consumo de memoria aumentaría en 50-75 MB. Eventualmente, el navegador simplemente se congelaría. Así es como se ve el perfil de memoria:

Como puede ver, el consumo sigue subiendo, ¡y no hay señales de ningún GC! Cada pico en el conteo de nodos y el seguimiento de la memoria corresponde a una visita a la segunda pantalla basada en formulario.

Ahora ya he revisado un montón de problemas relacionados con el consumo angular y de memoria, pero cada uno de ellos menciona que$scope para cualquiera de las vistas se eliminará cuando se cargue una nueva vista. losRecuento de nodos DOM Ciertamente no indica tal cosa para mí: /

También encontré 2 puntos importantes relacionados con el uso deng-repeat:

Evitar la invocación de cualquier función dentro delng-repeat directiva.No tiene un enlace de dos vías utilizandong-model Dentro de unng-repeat directiva.

Ambos de los que he evitado en la segunda pantalla, y sin embargo, el consumo de memoria está pasando por el techo.

Mi pregunta podría parecer seraún otra La pregunta relacionada con la memoria fue angular, pero realmente he tratado de obtener algún tipo de cierre en esto y no he encontrado uno.

Realmente agradecería cualquier ayuda en esto, ya que mi decisión de progresar con el uso de angular para el resto del portal depende de resolver este problema.

¡Gracias por leer!

Actualización 1

Residencia enIlanSugerencia, permítame agregar que hago uso de 2 complementos para representar el menú desplegable y la implementación del selector de fechas.

Para el desplegable, estoy usandoBootstrap-select y para el selector de fechas, estoy usandoBootstrap-datepicker.

Para que bootstrap-select funcionara, tuve que escribir una directiva personalizada que activó una transmisión en el$last evento deng-repeat. Se ve algo como esto:

.directive('onFinishRender', function($timeout) {
    return {
        restrict : 'A',
            link : function(scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function() {
                        scope.$emit('ngRepeatFinished');
                     });
                 }
            }
      };
});

Luego, en el controlador, confío en este evento para invocar el render para el complemento desplegable:

    $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
        $('#retailer').selectpicker('render');
    });

Para el bootstrap-datepicker, no tengo que hacer una cosa tan elaborada, ya que solo necesito ajustar el campo de entrada de fecha usando JS.

Actualización 2

Después de desactivar los complementos, el consumo de memoria se reduce drásticamente. Sin embargo, el problema de una fuga aún persiste. Antes, cada vez que se cargaba la vista de formulario, la memoria aumentaba en 50-60 MB. Después de apagar los complementos, se incrementa en 25-35 MB. Pero como se puede ver a continuación, el consumo de memoria se sigue acumulando.