AjaxView for Dynamic Web 2.0 App Performance Profiling

If you are new to AjaxView, read my previous post Ajax View – Rewrite Web App Code at Production Stage.  In this post, I am going to identify performance bottleneck of this blog site without touching the soul of my blog using AjaxView.  If you do not have AjaxView, download it from http://tinyurl.com/ajax-view-download.

Start Walking

  1. Configuring your browser.  AjaxView is running as a proxy (localhost) at port number 8888 so that you should configure your browser to listen from this proxy.  Since, this is a proxy tool, you can use any browser.  I am using Firefox, because IE is running for this blog post writing.
  2. Execute AjaxView.  AjaxView is running in a console window.
  3. Enter the URL.  Type https://udooz.net/blog.

Injected Instrumentation

You can do whatever you want in the site to profile the event you want to capture.  You can see the instrumented code based on the performance policy injected into the blog site code.  AjaxView injects necessary code for performing profiling, logging an send it to AjaxView at the head of the page.


 

Whereever required, it injects the profile code like the following

(tmpCache_emk_LogRecords.push(‘\r\nLM:PerformancePolicy:PerformancePolicy:SCRIPTENTER,’),
tmpCache_emk_LogRecords.push(new Date().getTime()),

During the loading and other execution of your web application, the above profile codes send the log details back to AjaxView using XMLHttpRequest.  See the following figure.

AjaxView Console

AjaxView Console

Getting the Results

Enough logging, now let us see the analyzed results of the logs by opening new tab in FireFox and type .  This is a fake URL for getting analyzed reports from AjaxView proxy.  A two column page will appear.  The left side contains the following links:

  • JS Performance Statistics
  • Proxy Statistics
  • LM Policies
  • Clear Statistics

Our focus in on JS Performance Statistics.

JS Performance Statistics

When clicking on JS Performance Statistics link, JavaScript related performance statistics will appear on the right side.  The result is in a three column tabular, with following items:

  • Site – Actual pages where JavaScript code find
  • Num Functions – The number of JavaScript functions in the page.
  • Worst Performance (ms) – Performance of the slowest function in the page.

In my blog web site, http://fakeurl.com//PerformancePolicy/PerformancePolicy/?&AJAXVIEWREQUEST=LMINFO shows slowest performance of 164 milliseconds.  By clicking the file displays another tabular results which contains number of JavaScript functions in the selected page.  Meantime (ms) for the function at https://udooz.net/blog/wp-includes/js/jquery/jquery.js?ver=1.2.6 actually shows lowest performance function with line and column details.  Here, it is 164 millisecond.  By clicking this shows the actual code.

Comparison with IE Development ToolBar Profiler

Let us verify the results with IE Development ToolBar’s JavaScript profiler.  The profiler shows the same set of functions with correct count details also.  But it varies in the time.  The highest maximum time was 109.38 taken by three functions.

Share This: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us

No Comments

Leave a Reply