在JS中統計函數執行次數與執行時間

来源:https://www.cnblogs.com/imwtr/archive/2018/09/04/9582150.html
-Advertisement-
Play Games

假如想統計JS中的函數執行次數最多的是哪個，執行時間最長的是哪個，該怎麼做呢？ 1. 統計函數執行次數 2. 統計函數執行時間 3. 如何控制函數的調用次數 4. 如何控制函數的執行時間 一、統計函數執行次數 常規的方法可以使用 console.log 輸出來肉眼計算有多少個輸出 不過在Chrome ...


假如想統計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 機制，在某種意義上是能控制函數的執行時機，得空再去看看它是怎麼實現的吧


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Pycharm下找不到sqlalchemy、pymysql的問題
    1、平臺： Windows10 Pycharm 2018.1 Python 3.6.4 2、問題： 我在Pycharm下建立一個flask_ab工程，導入包： 運行時報錯：“ImportError: No module named flask_sqlalchemy” 3、解決方案： 打開File-> ...
  • OC中NSString的使用、字元串的使用
    字元串作為OC語言的基本對象類型，被我們在各種地方廣泛使用，因此熟悉掌握字元串的屬性和方法，是OC必不可少的基礎之一。 字元串分為可變字元串（NSMutableString）和不可變字元串（NSString），首先我們來學習不可變字元串的屬性與方法。 一、不可變字元串 1.創建不可變字元串 主要有四 ...
  • Android非同步框架 RxJava
    觀察者模式的概念 觀察者A與被觀察者B建立訂閱關係，當被觀察者B發生某種改變時，立即通知觀察者A 添加依賴 基本模式 Observable被觀察者 註意各地方添加泛型避免大片警告，onNext()是事件的回調，onComplete()是事件的結尾。onComplete()與onError互斥需要保持 ...
  • Android根據圖片Uri獲取圖片path絕對路徑的幾種方法【轉】
    在Android 編程中經常會用到Uri轉化為文件路徑，如我們從相冊選擇圖片上傳至伺服器，一般上傳前需要對圖片進行壓縮，這時候就要用到圖片的絕對路徑。 下麵對我開發中uri轉path路徑遇到的問題進行總結，其中涉及到Android不同api下對於uri的處理，還有對於Google相冊圖片該如何獲取其 ...
  • Android Fragment
    Fragment生命周期 Fragment比Activity多的生命周期 Fragment引入佈局 重寫onCreateView方法引入佈局 Fragment事務 1.基本方法 使用事務之前，需要先獲取FragmentManager Fragment的回退棧 通過Activity維護一個回退棧來保存 ...
  • 2018前端工程師成長路線圖
    譯者按： 上王者算什麼？有本事刷一下你的前端技術！ 原文 ： "Modern Frontend Developer in 2018" 譯者 ： "Fundebug" 為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。 過去5年， "我" 一直作為一枚 全棧工程師 ，經 ...
  • bootstrapValidator驗證
    bootstrapValidator驗證大全 添加到js上 註：以下參數上面的賦值都為預設值，不添加該參數即使用預設值 定義自定義驗證規則 該規則是拓展插件的validators方法。 我將項目中常用的方法放到了一個單獨js中，也就是上面第一步引用的自定義方法。 使用方法如下： 常用事件 1、重置某 ...
  • webpack4.0各個擊破（10）—— Integration篇
    作為前端最火的構建工具，是前端自動化工具鏈 最重要的部分 ，使用門檻較高。本系列是筆者自己的學習記錄，比較基礎，希望通過 問題 + 解決方式 的模式，以前端構建中遇到的具體需求為出發點，學習 工具中相應的處理辦法。（本篇中的參數配置及使用方式均基於 ） 一. Integration 下文摘自 中文網 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類