AngularJS
Perfil de rendimiento

Todo sobre perfilado

¿Qué es el perfil?

Por definición, la creación de perfiles es una forma de análisis dinámico de programas que mide, por ejemplo, el espacio (memoria) o la complejidad del tiempo de un programa, el uso de instrucciones particulares o la frecuencia y duración de las llamadas a funciones.

¿Por qué es necesario?

La creación de perfiles es importante porque no puede optimizar de manera efectiva hasta que sepa en qué está gastando la mayor parte de su programa. Sin medir el tiempo de ejecución de su programa (creación de perfiles), no sabrá si realmente lo ha mejorado.

Herramientas y Técnicas:

1. Las herramientas de desarrollo integradas de Chrome.

   Esto incluye un conjunto completo de herramientas que se utilizarán para la creación de perfiles. Puede profundizar para descubrir cuellos de botella en su archivo javascript, archivos css, animaciones, consumo de CPU, fugas de memoria, red, seguridad, etc.

   Haga una grabación de la línea de tiempo y busque eventos de Evaluate Script sospechosamente largos. Si encuentra alguno, puede habilitar el Perfilador de JS y volver a hacer su grabación para obtener información más detallada sobre exactamente a qué funciones de JS se llamó y cuánto tiempo tomó cada una. Lee mas...

2. FireBug (usar con Firefox)

3. Dynatrace (usar con IE)

4. Batarang (usar con Chrome)

   Es un complemento obsoleto para el navegador Chrome, aunque es estable y se puede usar para monitorear modelos, rendimiento y dependencias para una aplicación angular. Funciona bien para aplicaciones de pequeña escala y puede darle una idea de lo que la variable de alcance tiene en varios niveles. Le informa sobre observadores activos, expresiones de observación, colecciones de observación en la aplicación.

5. Observador (usar con Chrome)

   Interfaz de usuario agradable y simplista para contar el número de observadores en una aplicación Angular.

6. Use el siguiente código para averiguar manualmente el número de observadores en su aplicación angular (crédito para @Words Like Jared Number of watchers )

(function() {
    var root = angular.element(document.getElementsByTagName('body')),
        watchers = [],
        f = function(element) {
        angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
            if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
                watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function(childElement) {
            f(angular.element(childElement));
        });
    };
 
    f(root);
 
    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
            watchersWithoutDuplicates.push(item);
        }
    });
    console.log(watchersWithoutDuplicates.length);
})();

7. Hay varias herramientas / sitios web disponibles en línea que facilitan una amplia gama de funcionalidades para crear un perfil de su aplicación.

   Uno de estos sitios es: https://www.webpagetest.org/

   Con esto, puede ejecutar una prueba gratuita de velocidad de sitios web desde múltiples ubicaciones en todo el mundo utilizando navegadores reales (IE y Chrome) y a velocidades de conexión reales de los consumidores. Puede ejecutar pruebas simples o realizar pruebas avanzadas que incluyen transacciones de varios pasos, captura de video, bloqueo de contenido y mucho más.

Próximos pasos:

Hecho con perfilado. Sólo te lleva a mitad del camino. La siguiente tarea es convertir sus descubrimientos en elementos de acción para optimizar su aplicación. Consulte esta documentación sobre cómo puede mejorar el rendimiento de su aplicación angular con simples trucos.

Feliz codificación :)