Javascript Performance Analysis-on the tool (YUI Profiler)

Recently read the high performance JavaScript http://book.douban.com/subject/5362856/, intends to write a series of articles to consolidate the knowledge point, although the tool Introduction At the end of the book, but in order to be able to have a more intuitive understanding in the subsequent articles, I plan to introduce the tool first, so that the performance analysis data can be better understood during code demonstration.
YUI Profiler official address http://developer.yahoo.com/yui/profiler/
Introduction
YUI is a very good tool. It provides methods (Profiling Functions), Profiling Constructors, object (Profiling Objects) analysis and other auxiliary help.
If you want to analyze and appeal to something, you need to register the stuff in YUI Profiler first, such as YAHOO. tool. Profiler. registerFunction // Analysis Method
YAHOO. tool. Profiler. registerConstructor // analysis Constructor
YAHOO. tool. Profiler. registerObject // analysis object
You can use
GetAverage -- get the average execution time
GetCallCount -- number of calls
GetMax (name) -- maximum execution time
GetMin (name) -- Minimum execution time
GetFunctionReport (name) -- Report on appeal methods
 
How to use it?
The performance consumption of JavaScript String concatenation in different browsers is different. Let's take a look at its different performance in Chrome 18 and 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> ';
};
}
 

The test object is very simple. It is to find the HTML object with the Id of test_box, concatenate the string for 1000 times in a loop, and add it to the object.
YUI test code:
// Two objects to be tested
Var ui1 = new UIDraw ();
Var ui2 = new UIDraw ();

// Register the UIDraw object to YUI Profiler
YAHOO. tool. Profiler. registerConstructor ("UIDraw", window );
// Execute the methods of two objects respectively

Ui1.Draw ();
Ui2.Draw ();

// Get feedback report and Output
Var report = YAHOO. tool. Profiler. getFunctionReport ("UIDraw. prototype. Draw ");
Console. log (report)
 

The performance of IE10 is worse than I expected:

 

Avg indicates the average execution time, cballs indicates the number of calls, max indicates the maximum execution time, And min indicates the minimum execution time.

 

Let's take a look at the performance of Chrome18:

It consumes about 1/3 less time than IE10.
 
Because the registration method I call is YAHOO. tool. profiler. registerConstructor, which tests the UIDraw object. If it is YAHOO. tool. profiler. if registerObject is used, only the registered objects, such as YAHOO. tool. profiler. registerObject ("ui1"); if you do not test the performance of ui2, You need to modify the code later. Set var report to YAHOO. tool. profiler. getFunctionReport ("UIDraw. prototype. draw "); changed to var report = YAHOO. tool. profiler. getFunctionReport ("ui1.Draw ");
The Code is as follows:
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)

 
You may wish to do it yourself.


From MiserLab