zoukankan      html  css  js  c++  java
  • Javascript性能分析——工具(YUI Profiler)上

    http://drupal.org/node/201916

    http://drupal.org/node/206792

    http://www.newhua.com/2012/1205/187066_4.shtml

    原文http://www.2cto.com/kf/201204/126311.html

    http://www.cnblogs.com/Miser/archive/2012/04/04/2432505.html

    最近看完了《高性能JavaScript》http://book.douban.com/subject/5362856/,打算写一系列的文章把知识点巩固下,尽管工具介绍在书的最后,但是为了能在后续文章中有个更为直观的认识,我打算先介绍下工具,这样在演示代码的时候可以看到性能分析数据更加理解深刻。
    YUI Profiler 官方地址http://developer.yahoo.com/yui/profiler/
    介绍
    YUI是个很赞的工具,它提供了方法(Profiling Functions),构造函数(Profiling Constructors)和对象(Profiling Objects)的分析以及其它的一些辅助帮助。
    如果你想分析上诉某种东东,需要先向YUI Profiler中注册那个东东,如YAHOO.tool.Profiler.registerFunction //分析方法
    YAHOO.tool.Profiler.registerConstructor//分析构造函数
    YAHOO.tool.Profiler.registerObject//分析对象
    注册晚之后便可以通过
    getAverage —— 得到平均执行时间
    getCallCount —— 被调用次数
    getMax(name) ——最大执行时间
    getMin(name) ——最小执行时间
    getFunctionReport(name) —— 上诉几个方法的报告
     
    如何用呢?
    JavaScript在不同浏览器里的字符串拼接的性能消耗是不同的,下面我们看看它在Chrome 18和IE10里的不同表现。
    function UIDraw(){
    }
    UIDraw.prototype.Draw = function(){
           for (var i = 1000; i >= 0; i--) {
                  var test_box = document.getElementById("test_box");
                  test_box.innerHTML += '<span>'+ i + '</span>';
           };
    }
     

    测试的对象很简单,就是找到Id为test_box的HTML对象,循环拼接1000次字符串,添加到该对象中。
    YUI测试代码:
    //2个待测试对象
    var ui1 = new UIDraw();
    var ui2 = new UIDraw();

    //将UIDraw对象注册到YUI Profiler中
    YAHOO.tool.Profiler.registerConstructor("UIDraw", window);
    //分别执行2个对象的方法

    ui1.Draw();
    ui2.Draw();

    //得到反馈报告并输出
    var report = YAHOO.tool.Profiler.getFunctionReport("UIDraw.prototype.Draw");
    console.log(report)
     

    IE10的表现比我预计的惨烈:

    \

     

    其中,avg就是平均执行时间,calls是被调用次数,max最大执行时间,min最小执行时间

    再来看看Chrome18的表现:

    \

    比IE10少消耗约1/3的时间。
     
    因为我调用的注册方法是YAHOO.tool.Profiler.registerConstructor,它对所UIDraw对象进行测试,如果是YAHOO.tool.Profiler.registerObject的话,那么仅对被注册的对象进行测试,如YAHOO.tool.Profiler.registerObject("ui1");那么不在对ui2的性能做测试了,后续代码也需要做修改,将var report = YAHOO.tool.Profiler.getFunctionReport("UIDraw.prototype.Draw");改为var report = YAHOO.tool.Profiler.getFunctionReport("ui1.Draw");
    代码如下:
    var ui1 = new UIDraw();
    var ui2 = new UIDraw();
    YAHOO.tool.Profiler.registerObject("ui1");
    ui1.Draw();
    ui2.Draw();
    var report = YAHOO.tool.Profiler.getFunctionReport("ui1.Draw");
    console.log(report)

     
    大家不妨自己动手实践下。

  • 相关阅读:
    UIScrollView控件介绍
    xib的简单使用
    使用xib开发界面
    浅析IOS中的AutoLayout
    关于字典转模型的个人理解
    Linux开发基础环境配置
    深度学习相关环境的配置
    蓝牙协议分析(2)_协议架构
    蓝牙协议分析(1)_基本概念
    10项目实战-交易数据异常检测
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2803675.html
Copyright © 2011-2022 走看看