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 http://www.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.

<head profile=”http://gmpg.org/xfn/11″>
  <script>
      var PageLoadStart = new Date().getTime();
      // other var declarations
      var emk_OkToSendNextLog = true;
      var verbose = false;

      function emk_CheckLogs() {
          if( emk_LogRecords.length >= emk_MAX_LOG_RECORDS_BEFORE_FLUSH ) {
              emk_FlushLogs();
          }
      }
      function emk_FlushLogs() {
          // implementation
      }
      // other functions
</script>
</head>
<!– actual page code –>

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 http://fakeurl.com/?&AJAXVIEWREQUEST=GET=main.html.  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/1646706643?&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 http://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.

Tags Tags: , , ,
Categories: JavaScript
Posted By: udooz
Last Edit: 30 Mar 2009 @ 12 09 AM

EmailPermalinkComments (0)
Problem
Monitor and control the client side behavior of a web application without modifying the current implementation normally in the case of production stage.

Forces

  • Finding client side performance of a web application in the production environment.
  • Making changes or adding instrumentation on client side code at production stage is dangerous.
  • HTTP profiling tools do not provide rendering time details.
  • Make the web application behavior uniform across different execution environments like IE 6, IE8, FireFox, Chrome, etc, since Array.sort() consumes processor utilization in IE than other browsers and Array.join() takes very less in IE than others.

SolutionWe are doing performance engineering of our web based product and now we are more concentrated on client side performance improvements.  With the help of available toolset like Fiddler, IE Development Toolbar and some others, it is possible to tweak the code points based on download time and size of the critical ASPX pages.  In addition to this, We would like to know the browser rendering or loading time of a behavior, however none of the tools do not provide such clarity.  IE Development Toolbar enables to profile JavaScript but in an ad-hoc manner. I was googled various places, and failed to get such tool.  I finished my journey at Microsoft Research where I found a tool called “AjaxView”, which enables to inject instrumentation code  such as performance profiling, infinite loop detection, etc on the fly even in the production environment by the following nature of web applications:

  • Easy and instant deployment
  • Dynamic extension (you can add any stuff on the response of a web request)

Thanks to Emre Kiciman and Benjamin Livshits at Microsoft Research for implementing this great tool.

How Does It Works

AjaxView sits between the web server and clients, acts as server-side proxy.  It intercepts and rewrites the JavaScript code generated from the web server for a web request by a client.  It does not affect the production (or development) environment.  See the following figure.

AjaxView Platform

AjaxView Platform

 The instrumented code is sent to the client browser and the instrumentations results are sent back as logs to the proxy by the adaptive and distributed instrumentation.  These log results are then analyzed and based on the instrumentation policies, the tool generates reports.  There are four components in AjaxView platform does this instrumentation.  See the following figure.  This image was taken from Kiciman and Wang’s Live Monitoring: Using Adaptive Instrumentation and Analysis to Debug and MaintainWeb Applications white paper at Microsoft Research.
AjaxView Components

AjaxView Components

 
These components are designed to achive the following based on the adaptive instrumentation approach:
  • A component (Transformer) which automatically rewrites the actual code to serve differently instrumented versions.
  • One or more components (Controller and Log Collector) which should continuously observe the end-to-end application behavior on the client side.
  • The observed results are then analysed and used to guide the adaptation of the dynamic instrumentation policy (Dynamic Extension Generator).

AjaxView supports the following broad categories of instrumentation policies:

  • Performance
  • Runtime analysis and debugging
  • Usability evaulation

Let us see a practical walk-through on the next post for better understanding of this tool.

References

Tags Tags: , , , , ,
Categories: JavaScript
Posted By: udooz
Last Edit: 29 Mar 2009 @ 11 01 PM

EmailPermalinkComments (1)
\/ More Options ...
Change Theme...
  • Users » 1
  • Posts/Pages » 54
  • Comments » 39
Change Theme...
  • VoidVoid « Default
  • LifeLife
  • EarthEarth
  • WindWind
  • WaterWater
  • FireFire
  • LightLight