Javascript Performance Analysis-on the tool (YUI Profiler)

Source: Internet
Author: User
Tags javascript string concatenation

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
 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.