关于分析

什么是分析?

根据定义,分析是动态程序分析的一种形式,用于测量程序的空间(存储器)或时间复杂度,特定指令的使用,或函数调用的频率和持续时间。

为什么有必要?

分析很重要,因为在你知道你的程序花费大部分时间做什么之前,你无法有效地进行优化。在不测量程序执行时间(分析)的情况下,你将不知道你是否真正改进了它。

工具和技术:

  1. Chrome 的内置开发工具

    这包括一整套用于分析的工具。你可以深入了解 javascript 文件,css 文件,动画,cpu 消耗,内存泄漏,网络,安全性等方面的瓶颈。

    制作时间轴记录并查找可疑的评估脚本事件。如果你找到任何,你可以启用 JS Profiler并重新进行录制,以获得有关确切调用哪些 JS 函数以及每次调用时间的详细信息。阅读更多…

  2. FireBug (与 Firefox 一起使用)

  3. Dynatrace (与 IE 一起使用)

  4. Batarang (与 Chrome 配合使用)

    它是 Chrome 浏览器的过时附加组件,虽然它很稳定,可用于监视角度应用程序的模型,性能和依赖性。它适用于小规模应用程序,可以让你深入了解范围变量在各个级别上的含义。它会在应用程序中告诉你活跃的观察者,观察表达式,观看集合。

  5. Watcher (与 Chrome 配合使用)

    用于计算 Angular 应用程序中观察者数量的简洁 UI。

  6. 使用以下代码手动查找角度应用程序中观察者的数量(归功于 @Words Jared 观察者数量

(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);
})();
  1. 有几个在线工具/网站可以提供广泛的功能,以创建你的应用程序的配置文件。

    一个这样的网站是: https//www.webpagetest.org/

    有了这个,你可以使用真正的浏览器(IE 和 Chrome)以及真正的消费者连接速度从全球多个地点进行免费的网站速度测试。你可以运行简单测试或执行高级测试,包括多步骤事务,视频捕获,内容阻止等等。

下一步:

完成分析。它只会带你走一半路。接下来的任务是将你的发现实际转化为行动项目以优化你的应用程序。请参阅此文档 ,了解如何使用简单的技巧提高角度应用程序的性能。

快乐编码:)