Start Walking
- 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.
- Execute AjaxView. AjaxView is running in a console window.
- 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.
<!– 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
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%C2%A0shows 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%C2%A0actually 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.