首页 > > 网页制作 > Javascript >

在JS中统计函数执行次数与执行时间

2018-09-05 07:50:07来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

假如想统计JS中的函数执行次数最多的是哪个，执行时间最长的是哪个，该怎么做呢？

 

1. 统计函数执行次数

2. 统计函数执行时间

3. 如何控制函数的调用次数

4. 如何控制函数的执行时间

 

一、统计函数执行次数

常规的方法可以使用 console.log 输出来肉眼计算有多少个输出

不过在Chrome中内置了一个 console.count 方法，可以统计一个字符串输出的次数。我们可以利用这个来间接地统计函数的执行次数

function someFunction() {
    console.count('some 已经执行');
}

function otherFunction() {
    console.count('other 已经执行');
}

someFunction(); // some 已经执行: 1
someFunction(); // some 已经执行: 2
otherFunction(); // other 已经执行: 1

console.count(); // default: 1
console.count(); // default: 2

不带参数则为 default 值，否则将会输出该字符串的执行次数，观测起来还是挺方便的

 

当然，除了输出次数之外，还想获取一个纯粹的次数值，可以用装饰器将函数包装一下，内部使用对象存储调用次数即可

var getFunCallTimes = (function() {
    
    // 装饰器，在当前函数执行前先执行另一个函数
    function decoratorBefore(fn, beforeFn) {
        return function() {
            var ret = beforeFn.apply(this, arguments);

            // 在前一个函数中判断，不需要执行当前函数
            if (ret !== false) {
                fn.apply(this, arguments);
            }
        };
    }
    
    // 执行次数
    var funTimes = {};
    
    // 给fun添加装饰器，fun执行前将进行计数累加
    return function(fun, funName) {
        // 存储的key值
        funName = funName || fun;
        
        // 不重复绑定，有则返回
        if (funTimes[funName]) {
            return funTimes[funName];
        }
        
        // 绑定
        funTimes[funName] = decoratorBefore(fun, function() {
            // 计数累加
            funTimes[funName].callTimes++;

            console.log('count', funTimes[funName].callTimes);
        });
        
        // 定义函数的值为计数值（初始化）
        funTimes[funName].callTimes = 0;

        return funTimes[funName];
    }
})();
function someFunction() {
    
}

function otherFunction() {
    
}


someFunction = getFunCallTimes(someFunction, 'someFunction');

someFunction(); // count 1
someFunction(); // count 2
someFunction(); // count 3
someFunction(); // count 4

console.log(someFunction.callTimes); // 4



otherFunction = getFunCallTimes(otherFunction);
otherFunction(); // count 1
console.log(otherFunction.callTimes); // 1

otherFunction(); // count 2
console.log(otherFunction.callTimes); // 2

 

二、统计函数执行时间

Chrome中内置了 console.time 和 console.timeEnd 来打点计算时间

console.time();

for (var i = 0; i < 100000; ++i) {

}

console.timeEnd(); // default: 1.77197265625ms

不传入参数的话，将以default输出毫秒值

我们可以封装一下，传入函数名称，类似上面的做法，使用装饰器在函数执行前后进行处理

var getFunExecTime = (function() {
    
    // 装饰器，在当前函数执行前先执行另一个函数
    function decoratorBefore(fn, beforeFn) {
        return function() {
            var ret = beforeFn.apply(this, arguments);

            // 在前一个函数中判断，不需要执行当前函数
            if (ret !== false) {
                fn.apply(this, arguments);
            }
        };
    }

    // 装饰器，在当前函数执行后执行另一个函数
    function decoratorAfter(fn, afterFn) {
        return function() {
            fn.apply(this, arguments);
            afterFn.apply(this, arguments);
        };
    }
    
    // 执行次数
    var funTimes = {};
    
    // 给fun添加装饰器，fun执行前后计时
    return function(fun, funName) {
        return decoratorAfter(decoratorBefore(fun, function() {
            // 执行前
            console.time(funName);
        }), function() {
            // 执行后
            console.timeEnd(funName);
        });
    }
})();

那么调用的时候，就不需要理会如何计时了

function someFunction() {
    for (var i = 0; i < 100000; ++i) {

    }
}


function otherFunction() {
    for (var i = 0; i < 10000000; ++i) {

    }
}

someFunction = getFunExecTime(someFunction, 'someFunction');
someFunction(); // someFunction: 1.616943359375ms

otherFunction = getFunExecTime(otherFunction, 'otherFunction');
otherFunction(); // otherFunction: 18.157958984375ms

 

Chrome的Console API毕竟不是标准的，除了使用它之外，还可以选择日期插件 Date 中的 getTime now 相关方法

然而使用Date对象来计算耗时并不正统，推荐使用标准的 performance.now

var start = performance.now();

console.time();

for (var i = 0; i < 10000000; ++i) {

}

var end = performance.now();

console.timeEnd(); // default: 23.598876953125ms

console.log(end - start); // 23.600000015459955

可以看到，它们是相差不大的

使用类似的方法，将它包装起来以便方便调用

var getFunExecTime = (function() {
    
    // 装饰器，在当前函数执行前先执行另一个函数
    function decoratorBefore(fn, beforeFn) {
        return function() {
            var ret = beforeFn.apply(this, arguments);

            // 在前一个函数中判断，不需要执行当前函数
            if (ret !== false) {
                fn.apply(this, arguments);
            }
        };
    }

    // 装饰器，在当前函数执行后执行另一个函数
    function decoratorAfter(fn, afterFn) {
        return function() {
            fn.apply(this, arguments);
            afterFn.apply(this, arguments);
        };
    }
    
    // 执行次数
    var funTimes = {};
    
    // 给fun添加装饰器，fun执行前后计时
    return function(fun, funName) {
        funName = funName || fun;

        if (funTimes[funName]) {
            return funTimes[funName];
        }
        
        // 绑定
        funTimes[funName] = decoratorAfter(decoratorBefore(fun, function() {
            // 执行前
            funTimes[funName].timestampStart = performance.now();
        }), function() {
            // 执行后
            funTimes[funName].timestampEnd = performance.now();
            
            // 将执行耗时存入
            funTimes[funName].valueOf = function() {
                return this.timestampEnd - this.timestampStart;
            };
        });

        return funTimes[funName];
    }
})();
function someFunction() {
    for (var i = 0; i < 100000; ++i) {

    }
}


function otherFunction() {
    for (var i = 0; i < 10000000; ++i) {

    }
}

// 包装
someFunction = getFunExecTime(someFunction);
// 执行
someFunction();
// 获取耗时，可直接使用函数的 valueOf
console.log(+someFunction); // 2.0999999847263098

otherFunction = getFunExecTime(otherFunction, 'otherFunction');
otherFunction(); 
console.log(+otherFunction); // 21.00000000745058

 

三、如何控制函数的调用次数

也可以通过闭包来控制函数的执行次数

function someFunction() {
    console.log(1);
}

function otherFunction() {
    console.log(2);
}


function setFunCallMaxTimes(fun, times, nextFun) {
    return function() {
        if (times-- > 0) {
            // 执行函数
            return fun.apply(this, arguments);
        } else if (nextFun && typeof nextFun === 'function') {
            // 执行下一个函数
            return nextFun.apply(this, arguments);
        }
    };
}

var fun = setFunCallMaxTimes(someFunction, 3, otherFunction);

fun(); // 1
fun(); // 1
fun(); // 1
fun(); // 2
fun(); // 2

 

四、如何控制函数的执行时间

因为JS是单线程的，控制函数的执行时间相对来说挺麻烦

通过 async await yield 等异步特性，也许还是能办到的

在React 16中的 Fiber 机制，在某种意义上是能控制函数的执行时机，得空再去看看它是怎么实现的吧

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：CodePush自定义更新弹框及下载进度条

下一篇：js关系图库：aworkflow

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签