Posts tagged as ' Web ' ...

 30 Mar 2009 @ 12:07 AM 
 

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 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

Email • Permalink • Comments (0)
 29 Mar 2009 @ 11:00 PM 
 

Ajax View – Rewrite Web App Code at Production Stage

 
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

Email • Permalink • Comments (1)
 25 Mar 2009 @ 7:44 AM 
 

IE 8 – Setting the Web Standard

 

Microsoft released Internet Explorer 8.0 a couple of days before.  When I installed RC1 months before, I had experienced some page crashes and degrade in performance and usability.  The most critical thing was loading “about:Tab” / “about:blank”.

The final release of IE 8.0 is impressed me lot not only for its performance and usability (of course, it is much faster than Chrome), its compliance with the industry standard and moving twoards the semantic web.  As a developer, it enables to write our web applications much standard way.  In addition to this, the IE 8.0 readiness toolkit enables to add new face to your web application.   From the compatibility perspective, it has three different rendering modes:

  • Quirks – backward compatibility with IE 5.0
  • IE 7.0 – backward compatibility IE 7.0
  • IE 8.0 (standard mode) – the latest

Let us see the IE 8.0’s new features and standards from developer view point.

Web Standards

CSS Expression has been deprecated in IE 8.0 (standard mode) due to its non-standard CSS extension and performane issue.  However, numerous non-CSS 2.1 properties are introduced with “-ms” prefix.  The filters also non-standard CSS, so they are now with “-ms” prefix.

  • Data URI Support.  An attractive feature which already exists on competative browsers is now introduced in IE family.  With this, you can enclose a resource content (or binary data) directly in the URL.  For example, this will help you to avoid unnecessary roundtrip to the server to fetch image data for a &lt;img&gt; tag “src”.   Once downloaded, it can be cacheable. Code sample is:

<img src=data:image/gif;base64, XyVRKzw0CClkeqva…

  • Improved Printing Support using CSS printing constructs.

AJAX now in HTML 5 Standard

  • AJAX Travel Log. AJAX enables to update page content without submitting the page i.e page navigation.  The problem with this is that the browser navigability components (back, forward and address bar) are not getting updated which confuses the user to traverse through their travel log.  IE8 treats window.location.hash updates like navigations and saves the previous document URL.
  • DOM Storage. Cookies are the only way to store bit and pieces of data on client machine today which is limited to 50 key-value pair per domain.  IE 8.0 implements W3C’s HTML 5.0 DOM storage, where you can store per-domain and per-session data as like as Silverlight’s Isolated Storage.  With DOM storage and the new window.navigator.onLine and online/offline events, you can make your application to work in offline mode.   See the following code:

var globalStorage = window.globalStorage["http://www.udooz.net"];

or

var sessionStorage = window.sessionStorage["http://www.udooz.net"];

// to check browser offline

if(!window.navigator.onLine) // do offline behavior

  • XMLHttpRequest Enhancements.  The inventor of XMLHttpRequest object made some enhancements related to timeout in IE 8.0.  This makes better breath for pages with long running or polling type of asynchronous requests.
  • Concurrent Connections.  Based on the internet connection type (narrow 0r broad band), IE 8.0 opens more concurrent connections (max: 6).  Developers can check this number and optimize their delivery.

Cross-domain Communication

  • XDomainRequest. In the Web 2.0 era, mash-ups are very common and critically acclaimed in the enterprise world too.  The fundamental nature of mash-up is getting data from different servers (or services).  The current limitation is when you need data from another domain you have to send your request to your server.  Your server pass through the request to the respective domain and get the data.  To avoid these unnecessary (?) pass-through layer, IE 8.0 introduces XDomainRequest object, you can directly communicate cross-domains.  However, the permission should be granted by your web server using Response.AddHeader(“XDomainRequestAllowed”, “1″); 
  • Cross Document Messaging (XDM).  Even though the XDomainRequest breaks the cross-domain barrier, still widgets with data supplied from different domain cannot interact with each other in a web page.  There are different workarounds for this.  Added to these, IE 8.0 provides “postMessage()” in window object as like:

window.postMessage(“Cross-domain communicated”, “http://www.msn.co.in”);

  • toStaticHTML.  This new method filters potentially harmful HTML content.

Visit http://msdn.microsoft.com/en-au/ie/dd433173.aspx#AJAX for more details.

Native JSON Support

IE 8.0 uses douglas crockford’s JSON API, so that you can natively call JSON.stringfy() and JSON.parse() methods.

In addition these, there are so many other features which makes IE 8.0 more near to the semantic web arena.  I’ll cover those details in a separate post.

Tags Tags: , , , ,
Categories: Semantic Web Posted By: udooz
Last Edit: 25 Mar 2009 @ 07 44 AM

Email • Permalink • Comments (0)
 28 Feb 2008 @ 7:28 PM 
 

Tech Watch: Comet – Again An Old in New Avatar

 

In an alternate to Ajax, or along with it, “Comet” is a server-pushing technology, as we know this as one of the Web Patterns.
Ajax is a technique to asynchronously contact server to get data and update UI (Microsoft calls this as Partial Page Update). In this way of programming, you can get the latest data from the server manually calling the server either by UI events or periodical polling to the server. Assume that your web application has stock market update, in order to get latest update, it needs to poll the server periodically. This will make overhead in both client and server side in one way. For example, assume that there are thousands client periodically polling the server at the same period, however there is no new information/state change in the server. Its an overhead for server.
Comet tries to resolve this by server “broadcasting” state change/new information to the listening clients. Its a king of “Server Push” pattern.

Tags Tags: ,
Categories: Architecture Posted By: udooz
Last Edit: 28 Feb 2008 @ 07 28 PM

Email • Permalink • Comments (0)
\/ More Options ...
Last 50 Posts
Back
Register an account
Change Theme...
  • Users » 1
  • Posts/Pages » 54
  • Comments » 39
Change Theme...
  • VoidVoid « Default
  • LifeLife
  • EarthEarth
  • WindWind
  • WaterWater
  • FireFire
  • LightLight