When writing a JavaScript program, if you need to know the execution time of a certain piece of code, you can use console.time(). However, when analyzing JavaScript programs with more complex logic and trying to find performance bottlenecks, console.time() is not applicable - In-depth analysis of the operation of JavaScript programs with more complex logic means inserting a large number of console.time() statements, which is undoubtedly unacceptable. For JavaScript program tuning with complex logic, the correct way is to use console.profile().
Browser support
Firefox, Google Chrome and Safari, which have installed the Firebug plugin, all support console.profile() statements, and the latest versions of IE and Opera also provide Profile functions. The use of console.profile() on several major browsers is similar. This article only introduces the use of console.profile() in Firebug. One thing worth noting is that if you use the Firebug console to directly write JavaScript experimental code, then console.profile() is invalid.
Use of console.profile()
The use of console.profile() is very simple: insert console.profile() where you need to start the profile, and insert console.profileEnd() where you end the profile. The following code is an example:
The code copy is as follows:
function doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
doSubTaskB(10000);
doSubTaskC(1000,10000);
}
function doSubTaskA(count){
for(var i=0;i<count;i++){}
}
function doSubTaskB(count){
for(var i=0;i<count;i++){}
}
function doSubTaskC(countX,countY){
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
}
}
console.profile();
doTask();
console.profileEnd();
Execute console.profile() before running the doTask() function. After the doTask() function is completed, the detailed information during the running process of the doTask() function can be collected. You can see in Firebug's console:
From the results, we can see that the profile time is 101.901ms in total, involving 5 function calls. The default title of the result is "Profile", which can be customized by passing parameters to the console.profile() function. For example, using console.profile ("Test Profile") can change the title of this profile to "Test Profile" in the result, which is especially useful when multiple profile processes are executed simultaneously. The meaning of each column in the specific profile result is:
1. Function. Function name.
2.Calls. Number of calls. For example, in the above example, the doSubTaskA() function is executed twice.
3.Percent. The percentage of the time consumed by this function call in the overall time.
4.Own Time. Excluding the time taken to call other functions, the amount of time taken by the function itself. For example, in the above example, doTask() undoubtedly took a long time to execute, but because it took all the time to call other functions, it did not take much time, only 0.097ms.
5.Time. In contrast to Own Time, the total time-consuming calculation of the function is not considered when calling factors to other functions. In the above example, the doTask() function executes 101.901ms. For Time and Own Time, you can also draw a conclusion: if Time is larger than Own Time, then the call to other functions is involved in the function.
6.Avg. The calculation formula is: Avg=Time/Calls. In the example above, the doSubTaskA() function was executed twice, and its total time was 1.054ms, so its average total time was 0.527ms.
7.Min. Minimum time-consuming to call this function. For example, in the above example, the doSubTaskA() function is executed twice, and its minimum time-consuming is that the call that takes less time to spend 0.016ms.
8.Max. The maximum time to call this function. For example, in the above example, the doSubTaskA() function was executed twice, and its maximum time-consuming process is that the call that took more time to spend 1.038ms.
9.File. The JS file where the function is located.
Use of Profile buttons in Firebug
In addition to inserting console.profile() statement into JavaScript code, Firebug also provides a Profile button to dynamically and in real time profile JavaScript code in the page. The button position is:
When a profile is required, you can press the button, and if the next page operation triggers any JavaScript code, Firebug will record it. At the end of the profile process, just press the button again. The final result is consistent with the result obtained by inserting the console.profile() statement.